코드랩 레퍼런스

border-style 본문

CSS

border-style

webstoryboy 2016. 6. 17. 17:29
border-style 속성은 테두리 스타일 속성을 설정합니다.
특징 설명
기본 값 border-top-style : none
border-right-style : none
border-bottom-style : none
border-left-style : none
상속 안됨
애니메이션 안됨
버전 CSS1

Definition

  • border-style는 테두리 스타일 속성을 설정합니다.
  • border-top-style는 위쪽 테두리 스타일 속성을 설정합니다.
  • border-right-style는 오른쪽 테두리 스타일 속성을 설정합니다.
  • border-bottom-style는 아래쪽 테두리 스타일 속성을 설정합니다.
  • border-left-style는 왼쪽 테두리 스타일 속성을 설정합니다.

Syntax

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ;
/* 기본 스타일 표현 방법(위/오른쪽/아래/왼쪽) */
border-style : solid dotted double dashed;

/* 기본 스타일 표현 방법(위/오른쪽,왼쪽/아래) */
border-style : solid dotted double;

/* 기본 스타일 표현 방법(위,아래/오른쪽,왼쪽) */
border-style : solid dotted;

/* 기본 스타일 표현 방법(위,오른쪽,아래,왼쪽) */
border-style : solid;

Property

속성 값 설명
none 테두리 스타일을 설정하지 않습니다.
hidden 테두리 스타일을 숨김으로 설정합니다.
dotted 테두리 스타일을 dotted(점선)으로 설정합니다.
dashed 테두리 스타일을 dashed(긴 점선)으로 설정합니다.
solid 테두리 스타일을 solid(실선)으로 설정합니다.
double 테두리 스타일을 double(이중선)으로 설정합니다.
groove 테두리 스타일을 groove(움푹 들어간 입체적인 선)로 설정합니다.
ridge 테두리 스타일을 ridge(앞으로 튀어나온 입체적인 선)로 설정합니다.
inset 테두리 스타일을 inset(박스 전체가 움푹 들어간 입체적인 선)로 설정합니다.
outset 테두리 스타일을 outset(박스 전체가 앞으로 튀어나온 입체적인 선)로 설정합니다.
inherit 테두리 스타일을 부모 요소로부터 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

Sample

border-style














Ad

Comments