Reference/CSS
border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
border-radius
border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
| 특징 | 설명 |
|---|---|
| 기본값 |
border-top-left-radius: 0 border-top-right-radius: 0 border-bottom-right-radius: 0 border-bottom-left-radius: 0 |
| 적용 | border |
| 버전 | CSS3 |
| 사용성 | ★★★★★ |
정의(Definition)
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
- border-radius 속성에 "/"가 붙으면 x축 y축을 분리합니다.
비교(Compare)
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
- border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
- border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
- border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
- border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
관련된 속성(Related Properties)
- border 속성은 테두리 속성을 일괄적으로 설정합니다.
- border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
- border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
- border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
- border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
문법(Syntax)
border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius
/* 기본 다중 속성 */
border-radius: 10px; /* 위쪽,오른쪽,아래쪽,왼쪽 */
border-radius: 10px 11px; /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-radius: 10px 11px 12px; /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-radius: 10px 11px 12px 13px; /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
/* 개별 속성 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 전역 속성 */
border-radius: inherit; /* 상속 */
border-radius: initial; /* 초기화 */
border-radius: revert; /* 원래대로 돌리기 */
border-radius: unset; /* 설정 해제 */
20px
30px
40px
50px
50px
60px
70px
80px
border-radius: 20px 30px 40px 50px / 50px 60px 70px 80px
/* 기본 다중 속성 */
border-radius: 10px 11px 12px 13px / 14px; /* X축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 / Y축 : 위쪽, 오른쪽, 아래쪽, 왼쪽 */
border-radius: 10px 11px 12px 13px / 14px 15px; /* X축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 / Y축 : 위쪽, 아래쪽 | 왼쪽, 오른쪽 */
border-radius: 10px 11px 12px 13px / 14px 15px 16px; /* X축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 / Y축 : 위쪽 | 왼쪽, 오른쪽 | 아래쪽 */
border-radius: 10px 11px 12px 13px / 14px 15px 16px 17px; /* X축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 / Y축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-radius: 10px / 14px 15px 16px 17px; /* X축 : 위쪽, 오른쪽, 아래쪽, 왼쪽 / Y축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-radius: 10px 11px / 14px 15px 16px 17px; /* X축 : 위쪽, 아래쪽 | 왼쪽, 오른쪽 / Y축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-radius: 10px 11px 12px / 14px 15px 16px 17px; /* X축 : 위쪽 | 왼쪽, 오른쪽 | 아래쪽 / Y축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-radius: 10px 11px 12px 13px / 14px 15px 16px 17px; /* X축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 / Y축 : 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
속성(Property)
| 속성값 | 값(예) | 설명 |
|---|---|---|
| border-top-left-radius | border-top-left-radius : 10px | 테두리 윗부분 왼쪽 모서리 굴곡을 설정합니다. |
| border-top-right-radius | border-top-right-radius : 10px | 테두리 윗부분 오른쪽 모서리 굴곡을 설정합니다. |
| border-bottom-right-radius: | border-bottom-right-radius : 10px | 테두리 아래부분 오른쪽 모서리 굴곡을 설정합니다. |
| border-bottom-left-radius: | border-bottom-left-radius : 10px | 테두리 아래부분 왼쪽 모서리 굴곡을 설정합니다. |
예제1(Sample)
테두리 굴곡을 설정한 예제입니다.
border-radius : 500px 500px 500px 500px;
예제2(Sample)
테두리 굴곡을 설정한 예제입니다.
X축
Y축
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| border-radius | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
보더와 관련된 속성
- border 속성은 테두리 속성을 일괄적으로 설정합니다.
- border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
- border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
- border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
- border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
- border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
- border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
- border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
- border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
- border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
- border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
- border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
- border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
- border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
- border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
- border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
- border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
- border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
- border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
- border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
- border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
- border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
- border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
- border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
- border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
- border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
- border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
- border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
- border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
- border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
댓글