HTML - CSS 예제로 보여주는 보더 스타일(border style) (펌자료)

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

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은 필수)

 

출처 : http://unikys.tistory.com/256