색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS 모서리 둥글기 생성기
네 모서리를 함께 또는 따로 조절하고 타원형 모서리까지 미리 보며 border-radius CSS를 만듭니다.
타원형 모서리
미리보기
CSS
도구 소개
버튼·카드·배지의 모양을 정하며 원형과 타원형 모서리를 비교할 수 있습니다.
사용 방법
px나 %를 선택하고 슬라이더 또는 숫자로 각 모서리 반지름을 조절하세요. 기본적으로 네 모서리가 연동되며 해제하면 개별 편집이 가능합니다. 타원형 설정에서 세로 반지름을 분리하면 가로·세로 곡률을 다르게 만들 수 있습니다.
범위는 0–500 px 또는 0–100%입니다. 미리보기에 사용한 border-radius를 그대로 복사하거나 저장합니다. 백분율의 모양은 실제 요소 크기에 따라 달라집니다. 단위를 바꾸면 숫자의 의미가 달라지므로 같은 시각적 크기로 환산되지는 않습니다.
자주 묻는 질문
border-radius의 슬래시는 무엇인가요?
앞은 가로 반지름, 뒤는 세로 반지름입니다. 모서리가 겹치면 CSS가 비율을 유지해 반지름을 줄여 상자에 맞춥니다.
50%를 넣으면 원이 아니라 타원이 되는 이유는 무엇인가요?
백분율 반지름은 요소의 너비와 높이를 각각 기준으로 계산합니다. 직사각형에 50%를 적용하면 타원이 되며, 원을 만들려면 너비와 높이가 같아야 합니다. 모서리 크기를 고정하려면 px를 사용하고 실제 요소 크기에서 확인하세요.
관련 도구
새 탭에서 열립니다
댓글
0