CSS 테두리 반경 속성
예시
두 개의 <div> 요소에 둥근 모서리를 추가합니다.
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성은 요소 모서리 의 border-radius
반경을 정의합니다.
팁: 이 속성을 사용하면 요소에 둥근 모서리를 추가할 수 있습니다!
이 속성은 1~4개의 값을 가질 수 있습니다. 규칙은 다음과 같습니다.
4가지 값 - 테두리 반경: 15px 50px 30px 5px; (첫 번째 값은 왼쪽 상단 모서리에 적용, 두 번째 값은 오른쪽 상단 모서리에 적용, 세 번째 값은 오른쪽 하단 모서리에 적용, 네 번째 값은 왼쪽 하단 모서리에 적용):
세 가지 값 - 테두리 반경: 15px 50px 30px; (첫 번째 값은 왼쪽 상단 모서리에 적용, 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용, 세 번째 값은 오른쪽 하단 모서리에 적용):
두 가지 값 - 테두리 반경: 15px 50px; (첫 번째 값은 왼쪽 상단 및 오른쪽 하단 모서리에 적용되고 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용됨):
하나의 값 - 테두리 반경: 15px; (값은 똑같이 둥근 네 모서리에 모두 적용됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS 구문
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
참고: 각 반경에 대한 4개의 값은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 제공됩니다. 왼쪽 아래를 생략하면 오른쪽 위와 동일합니다. 하단 오른쪽이 생략되면 상단 왼쪽과 동일합니다. top-right가 생략되면 top-left와 동일합니다.
속성 값
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
배경색이 있는 요소의 둥근 모서리 설정:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
예시
테두리가 있는 요소의 둥근 모서리 설정:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
예시
배경 이미지가 있는 요소의 둥근 모서리 설정:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
예시
또한 다음 사항에 유의하십시오.
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
관련 페이지
CSS 튜토리얼: CSS 둥근 모서리
HTML DOM 참조: borderRadius 속성