[CSS] 예제로 보여주는 보더 스타일(border style)

* CSS에서는 다양한 border 스타일들을 제공하고 있다. 일단 border 스타일의 종류를 먼저 예제로 간단하게 알아보고 그 아래에 좀더 상세하게 살펴보자.

: 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 제대로 표시되지 않을 수 있다.

 

* 각 스타일에 대한 예제이다.

border-style:dotted

border-style:solid

border-style:double

border-style:groove

border-style:ridge

border-style:inset

border-style:outset

 

 

* 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-width:5px

border-style:solid;border-width:thin

border-style:solid;border-width:memium

border-style:solid;border-width:thick

 

 

* 보더의 색에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-color:red

border-style:solid;border-color:gray

border-style:solid;border-color:black

border-style:solid;border-color:rgb(255,0,0)

border-style:solid;border-color:#ff0000

 

 

* 보더의 넓이, 스타일, 색을 한줄로 나타내기

border:dotted #ff0000 3px

 

 

* 각 방향의 보더를 다르게 설정

border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style:ridge

border-style:dotted solid double ridge

 

 

* 아래는 각 스타일에 대한 설명이다.

* 보더의 형태를 나타낸다.

border-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 넓이

border-width

: 5px, thin, medium, thick

 

* 색

border-color

: red, blue, green, gray, black, lightgray, rgb(255,0,0), #ff0000

 

* 각 방향의 스타일을 다르게 설정

border-top-style, border-right-style, border-bottom-style, border-left-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 위의 스타일을 간단하게 나타내기

border-style: dotted solid double dashed;

: 위는 dotted, 오른쪽은 solid, 아래는 double, 왼쪽은 dashed의 스타일을 가짐

 

* 짧게 넓이, 스타일, 색을 나타태기

border: 5px dotted red;

: 넓이는 5px, 스타일은 dotted, 색은 red (style은 필수)