CSS 테두리속성(Border Property) > html

출처 : http://webdir.tistory.com/341

CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정하는 border 속성에 대하여 알아봅니다.

border

축약 속성으로, border-width, border-style, border-color 순서로 작성한다. 몇몇 값을 생략해도 상관없다.

p {border: 5px solid red;}

속성값

• border-width : border의 width 값을 지정
• border-style : border의 style 값을 지정
• border-color : border의 color 값을 지정
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.border="3px solid blue"

지원 현황

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

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

축약 속성.

p {border-top: thick solid #ff0000;}
p {border-right: thick dashed #ff0000;}
p {border-bottom: thick dotted #ff0000;}
p {border-left: thick double #ff0000;}

속성값

• border-[top | right | bottom | left]-width : border의 width 값을 지정
• border-[top | right | bottom | left]-style : border의 style 값을 지정
• border-[top | right | bottom | left]-color : border의 color 값을 지정
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.borderTop="3px solid blue"
object.style.borderRight="3px solid blue"
object.style.borderBottom="3px solid blue"
object.style.borderLeft="3px solid blue"

지원 현황

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

border-color

4방향의 테두리에 적용될 색상을 지정한다. top, right, bottom, left 순서로 작성한다.

h1, h2, h3, h4 {border-style: solid;}
h1 {border-color: red green blue pink;} /* top-red, right-green, bottom-blue, left-pink */
h2 {border-color: red green blue;} /* top-red, right & left-green, bottom-blue */
h3 {border-color: red green;} /* top & bottom-red, right & left-green */
h4 {border-color: red;} /* all four borders are red */

항상 border-color 속성을 지정하기 전에 border-style을 선언해야 한다. 요소는 반드시 색상을 바꾸기전에 borders가 존재해야 한다.

속성값

• css 컬러 값 : 색상 키워드, 16진수 값, rgb 값등의 css 컬러 속성 값을 지정한다.
• transparent : 투명을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

border-color 데모 보기

자바스크립트 문법

object.style.borderColor="#FF0000 blue"

지원 현황

IE6 이하 버전들은 transparent 속성값을 지원하지 않는다. inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

border-style

4방향의 테두리에 적용될 선의 스타일을 지정한다.

h1 {border-style: dotted solid double dashed;} /* top-dotted, right-solid, bottom-double, left-dashed */
h2 {border-style: dotted solid double;} /* top-dotted, right & left-solid, bottom-double */
h3 {border-style: dotted solid;} /* top & bottom-dotted, right & left-solid */
h4 {border-style: dotted;} /* all four borders are dotted */

속성값

• none : border 스타일을 지정하지 않는다.
• hidden : none 속성값과 같다.
• dotted, dashed, solid, double, groove, ridge, inset, outset : 각각의 속성값들은 아래의 그림과 데모를 참고한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

border-style 데모 보기

자바스크립트 문법

object.style.borderStyle="dotted double"

지원 현황

inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

border-width

4방향의 테두리에 적용될 선의 두께를 지정한다. 숫자는 px, pt, em 단위가 될 수 있다.

h1, h2, h3, h4 {border-style: solid;}
h1 {border-width: thin medium thick 10px;} /* top-thin, right-medium, bottom-thick, left-10px */
h2 {border-width: thin medium thick;} /* top-thin, right & left-medium, bottom-thick */
h3 {border-width: thin medium;} /* top & bottom-thin, right & left-medium */
h4 {border-width: thin;} /* all four borders are thin */

항상 border-width 속성을 사용하기 전에 border-style 속성을 선언해야 한다.

속성값

• thin, medium, thick : 이 속성값들은 아래의 예제 링크를 참고하자.
• length : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

border-width 데모 보기

자바스크립트 문법

object.style.borderWidth="thin thick"

지원 현황

inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

border-radius

CSS3에 추가된 속성으로 축약 속성이며 4방향의 모서리에 지정될 반지름을 지정한다.

h1 {border-radius: 25px;}
h2 {
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 2em;
  border-bottom-left-radius: 2em;
}

h3 {border-radius: 2em 1em 4em / 0.5em 3em;}
h4 {
  border-top-left-radius: 2em 0.5em;
  border-top-right-radius: 1em 3em;
  border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius: 1em 3em;
} 

• top-left, top-right, bottom-right. bottom-left 순서로 값이 지정한다.
• div 태그의 모서리를 둥글게 하고 배경 이미지를 지정하면 모서리가 둥근 이미지도 만들어 낼 수 있다. 선택적으로 투명한 gif 파일도 포함할 수 있다.

속성값

• px, pt, em, % : 반지름의 길이를 지정한다.

border-radius 데모 보기

자바스크립트 문법

object.style.borderRadius="5px"

지원 현황

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

각 모서리에 개별적으로 반지름을 지정한다.

h1 {
  border-top-left-radius:2em;
  border-top-right-radius:2em;
  border-bottom-right-radius:2em;
  border-bottom-left-radius:2em;
}

h2 {
  border-top-left-radius: 2em 0.5em;
  border-top-right-radius: 1em 3em;
  border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius: 1em 3em;
} 

속성값

• px, pt, em, % : 반지름의 길이를 지정한다.

자바스크립트 문법

object.style.borderBottomLeftRadius="5px"

지원 현황

border-collapse

표의 칸 종류를 조정한다.

table {border-collapse: collapse;}

속성값

• collapse : 테두리가 축소(합쳐)된다.
• separate : 테두리가 분리된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.borderCollapse="collapse"

지원 현황

border-collapse 속성의 inherit 속성값은 IE9 이하 버전에서는 지원하지 않는다. !DOCTYPE이 지정되지 않았다면 border-collapse는 기대하지 않은 결과를 초래한다.

border-image

CSS3에 추가된 속성이고 축약 속성이며 border-style 속성에 지정된 스타일을 덮어쓸 이미지를 지정하고 추가적인 배경 레이어를 생성한다.

div {
  -webkit-border-image:url(border.png)undefined 30 30 round; /* Safari 5 */
  -o-border-image:url(border.png)undefined 30 30 round; /* Opera */
  border-image:url(border.png)undefined 30 30 round;
}

• border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 의 축약속성이다. 생략된 값은 기본값으로 설정된다.

속성값

속성값들의 자세한 설명은 아래에 따로 다룬다.

• border-image-source : 테두리로 사용할 이미지를 지정한다.
• border-image-slice : 테두리로 사용될 이미지의 위치를 지정한다.
• border-image-width : 테두리로 사용될 이미지의 너비를 지정한다.
• border-image-outset : border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.
• border-image-repeat : 테두리 이미지의 스케일을 조정하는 방법을 지정한다.

border-image 데모 보기

자바스크립트 문법

object.style.borderImage="url(border.png) 30 30 round"

지원 현황

오페라는 -o-border-image 속성을 대안으로 제공한다. 사파리 5는 -webkit-border-image 속성을 대안으로 제공하여 사파리 6부터 정식지원한다.

border-image-slice

CSS3에 추가된 속성으로 보더 이미지를 9등분 하도록 각 변으로부터의 offset 거리를 지정한다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 offset 거리부터 시계방향으로 지정된다. 기본값은 100%이다.

div {
  border: 30px solid transparent;
  border-image-source: url(border.png)undefined;
  border-image-slice: 30;
}

• 4개의 값은 각각 위, 오른쪽, 아래 및 왼쪽 가장자리의 여백을 의미하며 이로 인해 이미지는 4개의 모서리와 4개의 가장자리 및 가운데 영역등 총 9가지 영역으로 구분된다.
• 가운데 이미지 영역은 fill 키워드를 지정하지 않는 한(투명처리) 무시된다.

속성값

• number(숫자) : 래스터(raster) 이미지의 경우 픽셀 거리를 지정하고, 벡터(vector) 이미지인 경우에는 좌표를 지정한다.
• %(퍼센트) : 이미지의 크기에 대한 상대적인 크기를 지정한다.
• fill : 선택적으로 적용가능한 fill 키워드는 테두리 이미지의 가운데 영역을 위한 예약어이다.

자바스크립트 문법

object.style.borderImageSlice="50% 10%"

지원 현황

border-image-source

CSS3에 추가된 속성으로 추가로 배경 이미지 레이어를 만들어 border-style 속성을 덮어쓸 이미지를 정의한다.

div {border-image-source: url(border.png)undefined;}

속성값

• none : 이미지를 사용하지 않는다.
• url(이미지경로)undefined : 이미지 경로를 지정한다.

자바스크립트 문법

object.style.borderImageSource="url(border.png)undefined

지원 현황

border-image-width

CSS3에 추가된 속성으로 테두리 이미지의 width 값을 지정한다.

div {
  border-image-source: url(border.png)undefined;
  border-image-width: 10px;
}

속성값

• length(길이) : 테두리 이미지 영역의 크기를 px로 지정한다.
• number(숫자) : 기본값은 1이고 border-width 속성값에 대한 배수이다.
• %(퍼센트) : 테두리 이미지 영역의 수평 offset의 너비와 수직 offset의 높이로 사용된다.
• auto : 테두리 이미지의 너비는 해당 이미지 슬라이스의 원래 너비 또는 높이가 된다.

border-image-width 데모 보기

자바스크립트 문법

object.style.borderImageWidth="20px 30px"

지원 현황

border-image-outset

CSS3에 추가된 속성으로 border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.

div {
  border-image-source: url(border.png)undefined;
  border-image-outset: 5px;
}

속성값

• length(길이) : 기본 값은 0이며, 테두리 박스 뒤쪽의 테두리 이미지에 대한 위, 오른쪽, 아래, 왼쪽 값을 지정한다.
• number(숫자) : 해당 border-width 속성 값의 배수이다.

border-image-outset 데모 보기

자바스크립트 문법

object.style.borderImageOutset="5px 10px 20px 15px"

지원 현황

border-image-repeat

CSS3에 추가된 속성으로 테두리 이미지의 스케일을 조정하는 방법을 지정한다.

div {
  border-image-source: url(border.png)undefined;
  border-image-repeat: stretch;
}

속성값

• stretch : 기본값으로 영역을 채우기 위해 이미지가 늘어난다.
• repeat : 영역을 채우기 위해 이미지를 반복해서 노출한다.
• round : 타일 형태로 영역을 채운다. 만일 영역이 올바르게 채워지지 않으면 이미지의 크기를 재조정한다.
• space : 타일 형태로 영역을 채운다. 만일 영역이 올바르게 채워지지 않으면 이미지 사이의 공간을 조정한다.

border-image-repeat 데모 보기

자바스크립트 문법

object.style.borderImageRepeat="round"

지원 현황

border-spacing

테두리와 셀사이의 거리를 지정한다.

table {
  border-collapse: separate;
  border-spacing: 10px 50px;
}

속성값

• length length : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 첫 번째 값은 수평, 두 번째 수직값이며 만일 하나의 길이가 지정되지 않는다면 수평, 수직 둘다 하나의 값으로 적용된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.borderSpacing="15px"

지원 현황

IE8은 !DOCTYPE이 지정되어 있어야만 border-spacing 속성을 지원한다.