CSS / 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>
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+
Related Posts
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 마우스 올렸을 때 모양 만들기 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만든다. .jb-title에 마우스를 올리면 .jb-text가 ...
배경색을 만드는 속성 배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 기본 모양 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / table-layout / 표(table) 크기 고정시키기
표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...
CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성
개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...
order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...