Please Enable JavaScript!
Gon[ Enable JavaScript ]

스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기

 

환경: Eclipse Mars, CSS3

 

border-radius 속성은 태그의 모서리를 둥글게 만들고 싶을 때 적용합니다. 많이 사용하는 속성 중 하나입니다. 각이 진 사각형을 좀더 부드럽게 만드는 효과를 가지고 있어서 디자인 할 때 많이 사용합니다. border-radius IE8 이하에서는 지원하지 않습니다. 요즘 IE8 이하를 사용하는 사람은 없으니까 걱정하지 않아도 될 것 같네요.

 

테두리를 둥글게 해 주는 radius 속성은 2가지 형태로 표현이 가능합니다. 띄워 쓰기를 통해 4개 모서리 값을 한번에 넣어 주거나 각 모서리 별로 지정할 수 있는 속성에 값을 넣는 것입니다. 모서리 적용 순서는 top left 에서 시계 방향으로 돌아갑니다. 

 

¤ border-top-left-radius : 상자의 왼쪽 위 모서리를 정의합니다.

¤ border-top-right-radius : 상자의 오른쪽 위 모서리를 정의합니다.

¤ border-bottom-right-radius : 상자의 오른쪽 아래 모서리를 정의합니다.

¤ border-bottom-left-radius : 상자의 왼쪽 아래 모서리를 정의합니다.

 

<style type="text/css">

선택자 {

border-radius: [top-left ] [top-right ] [bottom-right ] [bottom-left ] ;

}

선택자 {

 border-top-left-radius : ;

border-top-right-radius : ;

border-bottom-right-radius : ;

border-bottom-left-radius : ;

}

</style>

 

샘플에서 2가지 형태를 같이 표현해 보았습니다. 첫 번째는 개별 속성으로 적용한 것이 아니라 한 번에 4개 모서리를 지정한 형태입니다. 값은 top left 에서 시계 방향으로 적용됩니다. 두 번째 예제는 속성을 분리해서 적용했습니다. 바로 위에 적용한 radius 와 동일한 모양입니다. 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#radius1{
		background-color: #cc5b88;
		width: 300px; height: 100px;
		margin: 10px; border: solid;
		border-radius: 7px 10px 7px 20px ;
	}
	#radius2{
		background-color: #4e539a;
		width: 300px; height: 100px;
		margin: 10px; border: solid;
		border-top-left-radius : 7px;
		border-top-right-radius : 10px;
		border-bottom-right-radius : 7px;
		border-bottom-left-radius : 20px;
	}
</style>
</head>
<body>
	<div id="radius1">
		border-radius: 7px 10px 7px 20px;
	</div>
	<div id="radius2">
		border-top-left-radius : 7px;<br/>
		border-top-right-radius : 10px;<br/>
		border-bottom-right-radius : 7px;<br/>
		border-bottom-left-radius : 20px;<br/>
	</div>
</body>
</html>

 

스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기

 

만약 border-radius: 7px 7px 7px 7px; 와 같이 모두 동일하다면 값을 다 적을 필요가 없습니다. 간략하게 border-radius: 7px; 로 표시해 주시면 됩니다.

 

#radius1 을 풀어 쓰면 #radius2 와 같습니다.

 

#radius1 {

border-radius: 7px;

}

 

#radius2 {

border-top-left-radius : 7px;

border-top-right-radius : 7px;

border-bottom-right-radius : 7px;

border-bottom-left-radius : 7px;

}

 

Posted by 녹두장군

댓글을 달아 주세요