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 : dotted 보다 큰 점선</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>
출력 결과
solid
dotted : 점선
dashed : dotted 보다 큰 점선
double : 선이 두개
groove : 홈이 파인 선
ridge : 선이 입체적으로 나옴
inset : 면이 입체적으로 들어감
outset : 면이 입체적으로 나옴
방향
테두리의 특정 방향만 따로 설정할 수도 있습니다.
border-topborder-bottomborder-leftborder-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>
출력 결과
Simple Border Example