코드랩 레퍼런스

border-radius 본문

CSS

border-radius

webstoryboy 2016. 6. 17. 17:19
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 : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | inherit;

/* 테두리 굴곡을 위쪽, 오른쪽, 아래쪽, 왼쪽으로 설정한 경우 */
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

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
border-radiusd
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Sample

border-radius












Sample1 border-radius 크기별 효과입니다.

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
radius09
radius10
  • .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
radius12
radius13
radius14
radius15
radius16
radius17
radius18
radius19
radius20
  • .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
radius22
radius23
radius24
radius25
radius26
radius27
radius28
radius29
radius30
  • .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
radius32
radius33
radius34
radius35
radius36
radius37
radius38
radius39
radius40
  • .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
radius42
radius43
radius44
radius45
radius46
radius47
radius48
radius49
radius50
  • .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.

Ad

Comments