웹페이지에 외곽선, 테두리를 그릴 수 있는 CSS 프로퍼티 border에 대하여 알아봅니다. 아래처럼 말이죠 ~

Test border 1


Test border 2


Test border 3


# CSS border 프로퍼티 알아보기border를 사용하면 해당 엘리먼트의 상하좌우 위치에 테두리를 적용할 수 있습니다. 사용방법은 아래와 같습니다.

border: width type color;

이때 적용 가능한 값들을 간단히 알아보면...

  • width : 테두리의 두께를 입력. px값으로 적용
  • type: 테두리 타입을 결정함
  • color: 테두리에 적용될 색의 값


@ width
px값으로 사용하며 10px처럼 적용합니다.
div { border: 10px solid; }


@ Border Type
solid - 가장 일반적인 타입으로 상하좌우 스타일이 동일
inset - 안으로 파힌듯한 스타일. 내부 그림자 효과와 유사
outset - 밖으로 도드라진 스타일. 외부 그림자 효과와 비슷
dotted - 많은 점들로 연결된 스타일
dashed - 작은 실선처럼 Dash 기호들이 연결된 모습
double - 두 개의 선이 나타남
groove - 3D groove 스타일이 적용됨
ridge- 3D ridge 스타일이 적용됨

@ color
테두리에 적용될 색을 결정합니다. 값은 HEX값을 사용할 수 있습니다.
Ex) border: 1px solid #f00;

참고로 color는 옵션으로 만약 값이 없는 경우... 즉 적용되지 않는 경우에는 상위에 위치한 color 프로퍼티에 있는 값이 적용되게됩니다. 아래의 코드는 위의 red값이 테두리색으로 결정됩니다.
div {
  color: red;
}
div p {
  border: 2px solid;
}

@ border.html
<div>
  123
  <p>456</p>
</div>

위 예제는 아래처럼 폰트색 red뿐만아니라 border에도 함께 red가 적용되어 빨간색 테두리로 나타나게됩니다.

123

456



! border 축약 프로퍼티
border 프로퍼티의 각 값들을 짧게 축약 프로퍼티를 사용하여 나타낼 수 있습니다. 다음은 축약 프로퍼티 border-width border-type 그리고 border-color입니다.

border-width - 테두리 두께 width 정하기
border-type - 테두리의 타입을 결정
border-color - 테두리 색을 결정

예를들어 아래의 border 프로퍼티는 다음과 같이 바꾸는 것과 동일하게 동작합니다.
div {
  border: 1px solid #000;
}
=> 아래와 동일

div {
  border-width: 1px;
  border-type: solid;
  border-color: #000;
}

여기까지 border 프로퍼티에 관한 몇 가지를 알아봤습니다.  그럼 아래는 이를 적용한느 다양한 예제 코드입니다.



# CSS Border 예제보기아래는 다양한 스타일의 border 프로퍼티를 예제로 구현하였습니다. 각각 어떻게 다른지 알아보세요.

@ border.html
<div class="border1">Example 1</div>
<div class="border2">Example 2</div>
<div class="border3">Example 3</div>
<div class="border4">Example 4</div>
<div class="border5">Example 5</div>


@ border.css
.border1 {
  border: 1px solid;
}
.border2 {
  border: 2px dashed #0f0;
}
.border3 {
  border: 3px double #0f0;
}
.border4 {
  border: 2px inset #999;
}
.border5 {
  border: 3px outset #f30;
}

예제를 위해서 각 엘리먼트는 width, height값을 각각 100px로 css에 추가하였습니다. 위 코드를 실행하면 아래와 같습니다.

Example 1
Example 2
Example 3
Example 4
Example 5