Last-modified: 2011-12-26 (月) 01:24:43
HTML・CSS/枠線を表示する(border)


確認したときの環境 †

↑

方法 †

  1. borderプロパティを使う。
    他のプロパティと同様に分けて指定も可能。
    border-width（太さ）：[単位付きの値]、[thin（細め）]、[medium（普通）]、[thick（太め）]
    border-style（スタイル）：[none]、[hidden]、[dotted（点線）]、[dashed（破線）]、[solid（実線）]、[double（二重線）]、[groove（掘りこまれた線）]、[ridge（grooveの逆）]、[inset（へこんだ線）]、[outset（insetの逆）]
    border-color（色）：[色名]、[RGB]、[16進数]
    Everything is expanded.Everything is shortened.
      1
  2
  3
  4
  5
  6
  7

    -
|
|
|
|
|
!

    div#column_set {
    border: 1px solid #131313;        /* 全周囲 1pxの実線を引く */
    border-top: 0px;            /* やっぱり上は無し */
    border-left: 5px double #FFFFFF;    /* やっぱり左は5pxの二重線を引く */
    border-right: 10px inset #FFFFFF;    /* やっぱり右は10pxのへこんだ線を引く */
    border-bottom: 10px dotted #FFFFFF;    /* やっぱり下は10pxの点線を引く */
}