CSS border-top-left-radius 속성
예시
두 <div> 요소의 왼쪽 상단 모서리에 둥근 테두리를 추가합니다.
#example1 {
border: 2px solid red;
border-top-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-left-radius: 50px
20px;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
border-top-left-radius
속성은 왼쪽 위 모서리의 반경을 정의합니다 .
팁: 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다!
기본값: | 0 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.borderTopLeftRadius="25px" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
border-top-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS 구문
border-top-left-radius: length|% [length|%]|initial|inherit;
참고: 두 개의 값을 설정하는 경우 첫 번째 값은 위쪽 테두리에 대한 값이고 두 번째 값은 왼쪽 테두리에 대한 값입니다. 두 번째 값이 생략되면 첫 번째 값에서 복사됩니다. 둘 중 하나의 길이가 0이면 모서리가 둥글지 않고 정사각형입니다.
속성 값
Value | Description | Play it |
---|---|---|
length | Defines the shape of the top-left corner. Read about length units | |
% | Defines the shape of the top-left corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
왼쪽 상단 모서리에 둥근 테두리를 백분율로 추가합니다.
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-left-radius: 40%;
}
관련 페이지
CSS 튜토리얼: CSS 둥근 모서리
HTML DOM 참조: borderTopLeftRadius 속성