CSS 코스

border 속성

개요

border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width - style - color의 순서로 사용합니다.

border-width

테두리의 두께로, 주로 px 단위를 사용합니다.

border-style

테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다.

border-color

테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다.

예제

<style>
	.border-styles > p{
		margin: 2px 0;
		padding: 1px 3px;
		border-width: 2px;
		border-color: #aaa;
	}
</style>
<div class="border-styles">
	<p style="border-style: solid">solid</p>
	<p style="border-style: dotted">dotted</p>
	<p style="border-style: dashed">dashed</p>
	<p style="border-style: double">double</p>
	<p style="border-style: groove">groove</p>
	<p style="border-style: ridge">ridge</p>
	<p style="border-style: inset">inset</p>
	<p style="border-style: outset">outset</p>
</div>

방향

테두리의 특정 방향만 따로 설정할 수도 있습니다.

  • border-top
  • border-bottom
  • border-left
  • border-right

border-bottom-color처럼 방향과 색,두께,스타일을 따로 설정할 수도 있습니다.

사용법

#box{
	border: 4px dotted green;
	border-bottom: 5px solid blue;
}

예제

<html>
<head>
<style>
	#box{
		padding: 5px;
		border: 4px dotted green;
		border-bottom: 5px solid blue;
	}
</style>
</head>

<body>
	 <div id="box">Simple Border Example</div>
</body>
</html>

이 페이지 수정 제안하기