Reference/CSS
border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
border-top-left-radius
border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
border-radius 속성은 테두리 굴곡을 설정합니다. 일관적으로 설정할 수도 있지만, 개별적으로도 설정이 가능합니다. 속성에 "/"가 있으면 x축, y축으로 나누어서 속성 설정이 가능합니다.
| 특징 | 설명 |
|---|---|
| 기본값 | border-top-left-radius : 0 |
| 적용 | border |
| 버전 | CSS3 |
| 사용성 | ★★☆☆☆ |
정의(Definition)
- border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
비교(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-top-left-radius : length | percentage
/* 기본 속성 */
border-top-left-radius: 10px; /* 단위 */
border-top-left-radius: 10%; /* 퍼센트 */
/* 개별 속성 */
border-top-left-radius: 10px 20px; /* x축 단위 | y축 단위 */
border-top-left-radius: 10% 20%; /* x축 퍼센트 | y축 퍼센트 */
/* 전역 속성 */
border-top-left-radius: inherit; /* 상속 */
border-top-left-radius: initial; /* 초기화 */
border-top-left-radius: revert; /* 원래대로 돌리기 */
border-top-left-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)
| 속성값 | 값(예) | 설명 |
|---|---|---|
| length | border-bottom-left-radius: 10px; | 테두리 아래부분 왼쪽 모서리 굴곡을 CSS 단위로 설정합니다. |
| percentage | border-bottom-left-radius: 10%; | 테두리 아래부분 오른쪽 모서리 굴곡을 퍼센트로 설정합니다. |
예제1(Sample)
테두리 굴곡을 설정한 예제입니다.
border-radius : 500px 500px 500px 500px;
예제2(Sample)
테두리 굴곡을 설정한 예제입니다.
border-radius: 100px 100px 100px 100px / 100px 100px 100px 100px;
X축
Y축
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| border-top-left-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 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
댓글