border 는 아시다시피 테두리를 말합니다. 하지만 사용시에는 잘 주의 하셔서 쓰시기 바랍니다. IE 의 문제점을 이야기한 포스팅을 참고하시기 바랍니다.

boder 는 padding 이나 margin 처럼 전체 border 값을 정할수도 있고 border-top, border-bottom, border-left, border-right 의 4면을 다 설정할수 있습니다. 두께, 스타일 등등이죠.

• border-color

  border, 테두리의 color 를 정합니다. 색상을 정하는 값을 적으시면 되겠네요

  예)border-color: #ff0000;

• border-width

  border의 두께를 정합니다. width라고는 되어있지만 제대로 말하면 height 이겠죠 ^^ 길이값 아무거나 적으시면 됩니다.

  예) border-width: 15px;

• border-style

  border 의 스타일을 나타냅니다. 종류는,
  none
  hidden
  dotted

  dashed

  solid

  double

  groove

  ridge

  inset

  outset

  이렇게 있으며 단어의 테두리는 보시는것처럼 나타나 지게 됩니다. ^^
  *지금 직접 적용시킨 것들입니다.

  예) border-style: dotted;

• border

  background 처럼 위의 값들을 한꺼번에 설정해 줄수가 있습니다.
  순서는 이렇습니다.

  border: 두께 스타일종류 색상;
  식으로 되어서 한줄로 표현이 가능합니다.

  예) border: 1px dotted #ff0000;

  테두리는 1px에다가 점으로 찍고 테두리색은 빨강.

• border-위,아래,좌,우 중 하나

  위는 모든 테두리를 한꺼번에 정의하는거였지만 border 다음에 위,아래,좌,우 를 직접 결정해 줄수 있습니다.

  border-top-color: blue;
  border-left-color:red;
  border-bottom-style: dotted;
  border-top-width: 2px;

  이렇게 각각 다른 면에 다른 명령을 줄수 있습니다.
  물론 각 면마다 짧게 적용이 가능합니다. 순서는 그냥 border 쓸때와 같습니다.

  예) border-bottom: 1px dashed #00ff00;

  밑테두리만 1px에다가 긴점선. 그리고 초록색

테두리를 잘쓰면 이미지를 사용 않고도 멋지게 표현이 가능합니다. ^^