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에다가 긴점선. 그리고 초록색

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