4. border-style / 테두리 모양을 정하는 속성
페이지 정보
작성자 관리자 댓글 0건 조회 720회 작성일 21-07-31 13:05본문
4. border-style / 테두리 모양을 정하는 속성
개요
border-style은 테두리(border)의 모양을 정하는 속성입니다.
기본값 : none
상속 : No
애니메이션 : No
버전 : CSS Level 1
border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다.
문법
border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
initial과 inherit 이외의 값의 모양은 아래의 예제를 참고하세요.
속성값은 한 개에서 네 개까지 정할 수 있습니다.
border-style: xx
모든 모서리의 모양을 xx로 만듭니다.
border-style: xx yy
위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만듭니다.
border-style: xx yy zz
위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만듭니다.
border-style: xx yy zz ww
위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만듭니다.
예제 1
각 속성값이 어떤 모양인지 보여주는 예제입니다. 값에 따라서 브라우저마다 모양이 다르게 나올 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
h1 {
font-family: Georgia;
font-style: italic;
padding: 10px;
}
.none {
border-style: none;
}
.hidden {
border-style: hidden;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
</style>
</head>
<body>
<h1 class="none">No Border.</h1>
<h1 class="hidden">Hidden Border.</h1>
<h1 class="dotted">Dotted Border.</h1>
<h1 class="dashed">Dashed Border.</h1>
<h1 class="solid">Solid Border.</h1>
<h1 class="double">Double Border.</h1>
<h1 class="groove">Groove Border.</h1>
<h1 class="ridge">Ridge Border.</h1>
<h1 class="inset">Inset Border.</h1>
<h1 class="outset">Outset Border.</h1>
</body>
</html>
예제 2
속성값 중 none과 hidden은 표(table)에서
border-collapse: collapse
일 때 차이가 납니다. 다음은 그 차이를 보여주는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
table {
width: 100%;
font-family: Georgia;
font-style: italic;
border: 1px solid #000000;
border-collapse: collapse;
}
table td {
border: 1px solid #000000;
padding: 0px 20px;
}
table.none {
border-style: none;
}
table.hidden {
border-style: hidden;
}
</style>
</head>
<body>
<h1>border-style: none;</h1>
<table class="none">
<tr>
<td>
<p>Lorem</p>
</td>
<td>
<p>Ipsum</p>
</td>
</tr>
<tr>
<td>
<p>Dolor</p>
</td>
<td>
<p>Amet</p>
</td>
</tr>
<tr>
<td>
<p>Phasellus</p>
</td>
<td>
<p>Mauris</p>
</td>
</tr>
</table>
<h1>border-style: hidden;</h1>
<table class="hidden">
<tr>
<td>
<p>Lorem</p>
</td>
<td>
<p>Ipsum</p>
</td>
</tr>
<tr>
<td>
<p>Dolor</p>
</td>
<td>
<p>Amet</p>
</td>
</tr>
<tr>
<td>
<p>Phasellus</p>
</td>
<td>
<p>Mauris</p>
</td>
</tr>
</table>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.