border-radius

border-radius

 

외각선의 모양을 둥글게 만드는 속성. 지정된 값은 둥글게 모양을 만들 원의 반경을 의미함.

지정될 값은 px 단위나 %단위로 지정할 수 있음.

 

 

속성	설명
border-radius:	좌우상하 모든 부분의 모양 지정.
border-left-top-radius	왼쪽 상단의 모양 지정
border-right-top-radius	오른쪽 상단의 모양 지정
border-left-bottom-radius	왼쪽 하단의 모양 지정
border-right-bottom-radius	오른쪽 하단의 모양 지정

 

 

[예제 1] 4면 모두 둥글게

<div style="position:absolute;left:10px;top:50px; border-radius:10px; border:5px solid #bbb; width:100px;height:100px;"></div>

[예제 2] 반경을 100%를 사용하여 원을 표현<div style="position:absolute;left:210px;top:50px;  border-radius:100%;   box-shadow:5px 5px 10px #ccc;   border:1px solid #bbb; width:100px;height:100px;"></div>

[예제 3] 그림자 효과를 같이<div style="position:absolute;left:410px;top:50px;  border-radius:25px; box-shadow:5px 5px 5px #ccc;
border:1px solid #bbb; width:100px;height:100px;"></div>

[예제 4] 상단 모서리만 효과<div style="position:absolute;left:10px;top:250px;   border-top-left-radius:15px;   box-shadow: 5px 5px 10px #ccc;   border:1px solid #bbb;   width:100px;height:100px;"></div>

[예제 5] 상하좌우를 한번에 각기 다른 모양으로<div style="position:absolute;left:210px;top:250px;   border-radius:15px 20px 5px 30px;   box-shadow: 5px 5px 10px #ccc;  border:1px solid #bbb;   width:100px;height:100px;"></div>