보더 라디우스 생성기

CSS border-radius를 시각적으로 조절하고 코드를 복사하세요

단위

모든 모서리 연결

타원형 모드

왼쪽 위

8px

오른쪽 위

8px

오른쪽 아래

8px

왼쪽 아래

8px

CSS 코드border-radius: 8px;

프리셋

사용 방법

각 모서리의 반경을 슬라이더로 조절하세요

'모든 모서리 연결'을 토글하여 동시에 조절하거나 개별적으로 조절하세요

타원형 모드를 활성화하여 가로/세로 값을 따로 조절하세요

CSS 코드를 복사하여 프로젝트에 적용하세요

보더 라디우스 팁

border-radius: 50%를 사용하면 정사각형 요소를 완벽한 원으로 만들 수 있습니다
알약 모양 버튼은 매우 큰 반경 값(예: 9999px)을 사용합니다
타원형 반경을 사용하면 자연스럽고 유기적인 모양을 만들 수 있습니다
UI 요소 전체에 일관된 border-radius를 사용하면 시각적 조화를 이룹니다
border-radius와 함께 overflow: hidden을 사용하여 자식 콘텐츠를 잘라낼 수 있습니다

자주 묻는 질문

border-radius란 무엇인가요?

border-radius는 요소의 테두리 모서리를 둥글게 만드는 CSS 속성입니다. 0은 직각, 값이 클수록 더 둥근 모서리가 됩니다.

타원형 border-radius란?

각 모서리는 가로와 세로 반경을 따로 가질 수 있습니다. 슬래시(/)로 구분하여 지정하면 타원형 모서리를 만들 수 있습니다.

px와 %의 차이는?

px는 절대값으로 고정된 크기이며, %는 요소의 너비와 높이에 상대적입니다. %를 사용하면 요소 크기에 따라 반응형으로 동작합니다.

관련 도구

그래디언트 생성기 그림자 생성기 색상 코드 변환

링크가 복사되었습니다!