CSS3 테두리

액트 2020. 4. 3.

CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다.

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

CSS2 테두리

border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해줍니다.

CSS2까지는 다음과 같은 border 속성만을 사용할 수 있었습니다.

border
border-style
border-width
border-color
border-top
border-right
border-bottom
border-left

CSS2 테두리(border) 내용 확인

[CSS] CSS 박스 모델 - 박스 모델, 패딩, 테두리, 마진, 아웃라인

박스 모델 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고..

yjshin.tistory.com

CSS3 테두리(border) 속성 지원 버전

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

border-radius 속성

CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Borders</title>
	<style>
		#p_01 {
			height: 50px;
			width: 200px;
			background: #DAA520;
			padding: 20px; 
			border-radius: 25px;
		}
		#div_01 {
			height: 50px;
			width: 200px;
			padding: 20px; 
			border: solid 3px #DAA520;
			border-radius: 25px;
		}
		#p_02 {
			height: 50px;
			width: 200px;
			padding: 20px; 
			background: url(/examples/images/img_other_pattern.png);
			background-position: left top;
			background-repeat: repeat;
			border-radius: 25px;
		}
	</style>
</head>

<body>

	<h1>border-radius 속성을 이용한 둥근 모서리 설정</h1>
	<p id="p_01">단락 요소도 둥근 모서리를 가질 수 있어요!</p>
	<div id="div_01">div 요소도 둥근 모서리를 가질 수 있어요!</div>
	<p id="p_02">배경 이미지가 있는 요소도 둥근 모서리를 가질 수 있어요!</p>

</body>

</html>

border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것입니다.

따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있습니다.

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

<style>

    #p_01 {

        border-top-left-radius: 20px;

        border-top-right-radius: 40px;

        border-bottom-right-radius: 60px;

        border-bottom-left-radius: 80px;

    }

</style>

또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있습니다.

설정 왼쪽 위 모서리부터 시계방향으로 한다.

border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

<style>

    #p_01 { border-radius: 20px 40px 60px 80px; }

    #p_02 { border-radius: 20px 40px 60px; }

    #p_03 { border-radius: 20px 40px; }

    #p_04 { border-radius: 20px; }

</style>

4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정됩니다.

ex) border-radius: 20px 40px 60px 80px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)

border-top-left-radius: 20px;

border-top-right-radius: 40px;

border-bottom-right-radius: 60px;

border-bottom-left-radius: 80px;

3개의 border-radius 속성값을 가질 때 마지막 값은 대칭되는 오른쪽 위 값 (40px) 과 같다.

ex) border-radius: 20px 40px 60px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)

border-top-left-radius: 20px;

border-top-right-radius: 40px;

border-bottom-right-radius: 60px;

border-bottom-left-radius: 40px;

2개의 border-radius 속성값을 가질 때 나머지 2개의 값은 대칭되는 값을 가진다.

ex) border-radius: 20px 40px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)

border-top-left-radius: 20px;

border-top-right-radius: 40px;

border-bottom-right-radius: 20px;

border-bottom-left-radius: 40px;

1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정됩니다.

ex) border-radius: 20px;

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)

border-top-left-radius: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

border-bottom-left-radius: 20px;

border-image 속성

CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있습니다.

border-image 속성은 다음과 같은 순서로 동작합니다.

테두리(border)로 사용할 이미지를 결정합니다.
이미지의 어느 부분을 자를 것인지 결정합니다.
테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정합니다.

우선 테두리로 사용할 이미지를 결정합니다.

border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눕니다.

그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 됩니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Borders</title>
	<style>
		#p_01 {
			padding: 20px;
			border: 20px solid transparent;
			-webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
			border-image: url(/examples/images/img_css3_pattern.png) 34 round;
		}
		#p_02 {
			padding: 20px;
			border: 20px solid transparent;
			-webkit-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 22 round;
			border-image: url(/examples/images/img_css3_pattern.png) 22 round;
		}
		#p_03 {
			padding: 20px;
			border: 20px solid transparent;
			-webkit-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 10 round;
			border-image: url(/examples/images/img_css3_pattern.png) 10 round;
		}
	</style>
</head>

<body>

	<h1>border-image 속성 - round 속성값</h1>
	<p id="p_01">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
	<p id="p_02">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
	<p id="p_03">테두리 중간 부분의 처리를 반복으로 설정했어요!</p>
	<p><br>위에서 사용한 원본 이미지는 다음과 같습니다.</p>
	<img src="/examples/images/img_css3_pattern.png">

</body>

</html>

※ border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 합니다.

[출처] TCPSCHOOL.com

저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

티스토리에 코드펜 CodePen 소스 코드 올리는 방법 (6)	2020.04.09
CSS3 텍스트 (0)	2020.04.09
CSS3 그림자 및 배경 효과 (0)	2020.04.02
CSS3 선형 그래디언트(gradient) (0)	2020.03.26
CSS3 모듈 - 밴더 프리픽스 (0)	2020.03.26

CSS3 테두리

CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다.

CSS2 테두리

CSS3 테두리(border) 속성 지원 버전

border-radius 속성

border-image 속성

'IT > Web' 카테고리의 다른 글

댓글

티스토리툴바

CSS3 테두리

CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다.

CSS2 테두리

CSS3 테두리(border) 속성 지원 버전

border-radius 속성

border-image 속성

'IT > Web' 카테고리의 다른 글

관련글

댓글

티스토리툴바