코드랩 레퍼런스
border-radius 본문
특징 | 설명 |
---|---|
기본 값 | border-top-left-radius : 0 border-top-right-radius : 0 border-bottom-right-radius : 0 border-bottom-left-radius : 0 |
상속 | 안됨 |
애니메이션 | 가능 |
버전 | CSS3 |
Definition
- border-radius 속성은 모서리 굴곡을 설정합니다.
Syntax
border-radius : 5px;
/* 테두리 굴곡을 위쪽/아래쪽(5px), 왼쪽/오른쪽(6px)으로 설정한 경우 */
border-radius : 5px 6px;
/* 테두리 굴곡을 위쪽(5px), 왼쪽/오른쪽(6px), 아래쪽(7px)으로 설정한 경우 */
border-radius : 5px 6px 7px;
/* 테두리 굴곡을 위쪽(5px), 오른쪽(6px), 아래쪽(7px), 왼쪽(8px)으로 설정한 경우 */
border-radius : 5px 6px 7px 8px;
/* 부모 요소로부터 속성을 상속 받은 경우 */
border-radius : inherit; /* 다음의 방식은 풀어쓰면 다음과 같습니다. */
border-radius: 10px/50px;
border-top-left-radius: 10px 50px;
border-top-right-radius: 10px 50px;
border-bottom-right-radius: 10px 50px;
border-bottom-left-radius: 10px 50px;
/* 다음의 방식은 풀어쓰면 다음과 같습니다. */
border-radius: 5px 7px 8px / 4px 3px;
border-top-left-radius: 5px 4px;
border-top-right-radius: 7px 3px;
border-bottom-right-radius: 8px 4px;
border-bottom-left-radius: 7px 3px;
/* 다음의 방식은 풀어쓰면 다음과 같습니다. */
border-radius: 120px 60px 80px 140px / 40px 100px 40px 70px;
border-top-left-radius: 120px 40px;
border-top-right-radius: 60px 100px;
border-bottom-right-radius: 80px 40px;
border-bottom-left-radius: 140px 70px;
/* 다음의 방식은 풀어쓰면 다음과 같습니다. */
border-radius: 200px 100px / 50px 70px;
Vertical border radius for top-left portion is: 200px
Vertical border radius for bottom-right portion is: 200px
Vertical border radius for top-right portion is: 100px
Vertical border radius for bottom-left portion is: 100px
Horizontal border radius for top-left portion is: 50px
Horizontal border radius for bottom-right portion is: 50px
Horizontal border radius for top-right portion is: 70px
Horizontal border radius for bottom-left portion is: 70px
Property
속성 값 | 설명 |
---|---|
border-top-left-radius | 테두리 굴곡을 위부분 왼쪽에 설정합니다. |
border-top-right-radius | 테두리 굴곡을 위부분 오른쪽에 설정합니다. |
border-bottom-right-radius | 테두리 굴곡을 아래부분 오른쪽에 설정합니다. |
border-bottom-left-radius | 테두리 굴곡을 아래부분 왼쪽에 설정합니다. |
inherit | 테두리 굴곡을 부모 요소로부터 상속받습니다. |
Compatibility
6 | 7 | 8 | 9 | 10 | 11 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-radiusd | |||||||||||||
border-top-left-radius | |||||||||||||
border-top-right-radius | |||||||||||||
border-bottom-right-radius | |||||||||||||
border-bottom-left-radius |
Sample
Sample1 border-radius 크기별 효과입니다.
- .radius01 {border-radius: 0px;}
- .radius02 {border-radius: 5px;}
- .radius03 {border-radius: 10px;}
- .radius04 {border-radius: 15px;}
- .radius05 {border-radius: 20px;}
- .radius06 {border-radius: 30px;}
- .radius07 {border-radius: 40px;}
- .radius08 {border-radius: 50px;}
- .radius09 {border-radius: 60px;}
- .radius10 {border-radius: 70px;}
Sample2 border-radius 크기별 효과입니다.
- .radius11 {border-radius: 0px 0px;}
- .radius12 {border-radius: 15px 0px;}
- .radius13 {border-radius: 30px 0px;}
- .radius14 {border-radius: 45px 0px;}
- .radius15 {border-radius: 60px 0px;}
- .radius16 {border-radius: 75px 0px;}
- .radius17 {border-radius: 90px 0px;}
- .radius18 {border-radius: 105px 0px;}
- .radius19 {border-radius: 120px 0px;}
- .radius20 {border-radius: 135px 0px;}
Sample3 border-radius 크기별 효과입니다.
- .radius21 {border-radius: 10px/55px;}
- .radius22 {border-radius: 20px/55px;}
- .radius23 {border-radius: 30px/55px;}
- .radius24 {border-radius: 40px/55px;}
- .radius25 {border-radius: 50px/55px;}
- .radius26 {border-radius: 55px/50px;}
- .radius27 {border-radius: 55px/40px;}
- .radius28 {border-radius: 55px/30px;}
- .radius29 {border-radius: 55px/20px;}
- .radius30 {border-radius: 55px/10px;}
Sample4 border-radius 크기별 효과입니다.
- .radius31 {border-radius: 0px 0px 0px 10px;}
- .radius32 {border-radius: 0px 0px 0px 20px;}
- .radius33 {border-radius: 0px 0px 0px 30px;}
- .radius34 {border-radius: 0px 0px 0px 40px;}
- .radius35 {border-radius: 0px 0px 0px 50px;}
- .radius36 {border-radius: 0px 0px 0px 60px;}
- .radius37 {border-radius: 0px 0px 0px 70px;}
- .radius38 {border-radius: 0px 0px 0px 80px;}
- .radius39 {border-radius: 0px 0px 0px 100px;}
- .radius40 {border-radius: 0px 0px 0px 110px;}
Sample5 랜덤 크기의 원형 모양입니다.
- .radius41 {border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%;}
- .radius42 {border-radius: 40% 40% 50% 40% / 30% 50% 50% 50%;}
- .radius43 {border-radius: 100% 0 0 100% / 50% 50% 50% 50%;}
- .radius44 {border-radius: 50% 50% 0 0 / 50% 50% 0 0;}
- .radius45 {border-radius: 50% 50% / 100% 0 0 0;}
- .radius46 {border-radius: 50% 40% 50% 70% / 50% 50% 90% 60%;}
- .radius47 {border-radius: 50% 75% 40% 100%;}
- .radius48 {border-radius: 200px 100px / 50px 70px;}
- .radius49 {border-radius: 120px 60px 80px 140px / 40px 100px 40px 70px;}
- .radius50 {border-radius: 50% 50% 28% 26% / 50% 50% 50% 50%;}
CSS Border-Radius Generator
See the Pen CSS Border-Radius Generator by Peter Klein (@pmk) on CodePen.