CSS border-bottom-right-radius 속성

두 <div> 요소의 오른쪽 하단 모서리에 둥근 테두리를 추가합니다.

#example1 {
border: 2px solid red;
border-bottom-right-radius: 25px;
}

#example2 {
border: 2px solid red;
border-bottom-right-radius: 50px 20px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

border-bottom-right-radius속성은 오른쪽 하단 모서리의 반경을 정의합니다 .

팁: 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다!

기본값:	0
상속:	아니요
애니메이션 가능:	예. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.borderBottomRightRadius="25px"

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
border-bottom-right-radius	5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

border-bottom-right-radius: length|% [length|%]|initial|inherit;

참고: 두 개의 값을 설정하는 경우 첫 번째 값은 아래쪽 테두리에 대한 값이고 두 번째 값은 오른쪽 테두리에 대한 값입니다. 두 번째 값이 생략되면 첫 번째 값에서 복사됩니다. 둘 중 하나의 길이가 0이면 모서리가 둥글지 않고 정사각형입니다.

Value	Description	Play it
length	Defines the shape of the bottom-right corner. Default value is 0. Read about length units
%	Defines the shape of the bottom-right 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-bottom-right-radius: 40%;
}