개요
border-radius 속성은 테두리를 둥글게 표시해준다.
<※ ie8이하 미지원>
px, em등의 단위를 사용하며 border-top-left-radius , border-bottom-right-radius 같은 속성이나 margin/padding처럼 띄어쓰기를 구분으로 4개 모서리를 각각 설정 할 수 있다.
사용법
#box { border-radius: 7px 2px 15px 5px} #box2 { border-radius: 3px}
예제
<html> <head> <style> #box { border-radius: 0px 5px 10px 15px; border:3px solid;} #box2 { border-radius: 5px; border:3px solid} </style> </head> <body> <div id="box">Border Radius Test</div> <br> <div id="box2">Border Radius Test2</div> </body> </html>
출력 결과:
Border Radius Test
Border Radius Test2