본문으로 바로가기

CSS 테두리속성(Border Property)

category 웹코딩/CSS 2015. 6. 2. 12:00

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"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9+ FF4 SF5, iOS3 CH10, An2 O10.6

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"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9+ 지원 지원 지원 지원

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) 30 30 round; /* Safari 5 */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
  border-image:url(border.png) 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"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ FF4 SF3, iOS3 CH9, An2 O11

오페라는 -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);
  border-image-slice: 30;
}
  • 4개의 값은 각각 위, 오른쪽, 아래 및 왼쪽 가장자리의 여백을 의미하며 이로 인해 이미지는 4개의 모서리와 4개의 가장자리 및 가운데 영역등 총 9가지 영역으로 구분된다.
  • 가운데 이미지 영역은 fill 키워드를 지정하지 않는 한(투명처리) 무시된다.

속성값

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

자바스크립트 문법

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

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ 지원 SF6+ 지원 미지원

border-image-source

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

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

속성값

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

자바스크립트 문법

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

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ 지원 SF6+ 지원 미지원

border-image-width

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

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

속성값

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

border-image-width 데모 보기

자바스크립트 문법

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

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ 지원 SF6+ 지원 미지원

border-image-outset

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

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

속성값

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

border-image-outset 데모 보기

자바스크립트 문법

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

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ 지원 SF6+ 지원 미지원

border-image-repeat

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

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

속성값

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

border-image-repeat 데모 보기

자바스크립트 문법

object.style.borderImageRepeat="round"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE11+ 지원 SF6+ 지원 미지원

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 속성을 지원한다.