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 이외의 값의 모양은 아래의 예제를 참고하세요.
속성값은 한 개에서 네 개까지 정할 수 있습니다.
모든 모서리의 모양을 xx로 만듭니다.
위쪽과 아래쪽 모서리의 모양은 xx로, 왼쪽와 오른쪽의 모양은 yy로 만듭니다.
위쪽 모양은 xx로, 왼쪽과 오른쪽의 모양은 yy로, 아래쪽의 모양은 zz로 만듭니다.
| border-style: xx yy zz ww |
위쪽 모양은 xx로, 오른쪽 모양은 yy로, 아래쪽의 모양은 zz로, 왼쪽 모양은 ww로 만듭니다.
예제 1
각 속성값이 어떤 모양인지 보여주는 예제입니다. 값에 따라서 브라우저마다 모양이 다르게 나올 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!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 |
일 때 차이가 납니다. 다음은 그 차이를 보여주는 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!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> |
