소개
CSS3의 border-radius 속성은 레이어의 모서리를 둥글게 표현할 때 사용합니다.
border-radius로 한꺼번에 네 귀퉁이 모서리에 대한 동일한 설정을 할 수 있고,
border-[top | bottom]-[left | right]-radius로 네 귀퉁이 모서리의 모양을 달리 설정할 수도 있습니다.
소스
<!DOCTYPE html>
<html>
<head>
<title>border-radius 속성</title>
<style type="text/css">
#myLayer
{
width:300px; height:200px; padding:20px;
border:1px solid red;
border-radius:20px;
}
#myLayer2
{
width:300px; height:200px; padding:20px;
border:1px solid red;
border-top-left-radius: 4em;
border-top-right-radius: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 4em;
}
</style>
</head>
<body>
<div id="myLayer">
안녕하세요.<br />
반갑습니다.<br />
</div>
<br />
<div id="myLayer2">
안녕하세요.<br />
반갑습니다.<br />
</div>
</body>
</html>
실행 결과
끝.