스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기

 

환경: Chrome, CSS

 

border-radius 는 둥근 모서리를 표현할 수도 있지만 타원으로도 가능합니다. 이전에 다루었던 내용은 가로와 세로의 반지름이 같은 원이었습니다. border-radius 는 기본적으로 4개의 모서리에 들어가는 값은 하나인데 이것을 두 개로 나누어서 입력하게 되면 x(가로) y(세로) 가 다른 반지름 적용이 가능합니다. 이렇게 다른 값을 넣게 되면  타원이 되는 것입니다.

 

먼저 그림을 통해서 설명을 하도록 하겠습니다. 그림처럼 개별 속성에서 2개의 값을 띄워서 써 주면 앞에 있는 값이 가로 지름이 되는 것이고 뒤에 있는 y 값이 세로 지금이 되어서 타원이 되는 것입니다. 

스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기

 

또 다른 형태는 아래와 같습니다. 슬래쉬(/) 를 통해서 앞의 값은 각 모서리의 x 축을 나타내는 것이고 슬래쉬 뒤의 값들은 y 축에 해당합니다.

 


border-radius: ulx urx lrx llx / uly ury lry lly;

 

스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기

 

그럼 border-radius: 2px 1px 4px / 0.5px 3px; 처럼 각 테두리 값이 다 채워지지 않은 것들은 어떻게 해석할까요? 이것은 앞의 값으로 채웁니다. 그러니까 앞의 두 값만 있으면 나머지 뒤에 값은 동일합니다. 같은 열에 있는 값으로 채우는 것이죠. border-radius: 2px 1px 4px 1px / 0.5px 3px 0.5px 3px; 와 같은 것이죠.

 

border-radius: 2px 1px 4px / 0.5px 3px;

 

아래에 있는 형식과 동일합니다.

 

border-top-left-radius: 2px 0.5px;

border-top-right-radius: 1px 3px;

border-bottom-right-radius: 4px 0.5px;

border-bottom-left-radius: 1px 3px;

 

아래 샘플에서는 표현 형식을 달리해서 동일한 타원형 모서리 모양을 만들었습니다. border-radius : 100px / 50px; 이 아니라 0 을 넣어 줘야 border-top-left-radius : 100px 50px; 와 동일하게 되는 것입니다.

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

스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기

Posted by 녹두장군