枠の各辺のスタイルを指定するのは，border-top-style，border-right-style，border-bottom-style および border-left-style プロパティである。

border-top-style: キーワード;

border-right-style: キーワード;

border-bottom-style: キーワード;

border-left-style: キーワード;

　これらのプロパティは，

• すべての要素に適用される。
• 初期値は，キーワード none である。
• プロパティの値は，継承されない。

また，キーワードとして与えるのは，

none

枠は描かれない。枠のスタイルが none であると，対応する辺の枠の太さは強制的に 0 にされる。

hidden

none の場合と同じく枠は描かれないが，表のセルに対して指定したときに none とは異なるふるまいをする。これについては後述する。

dotted

枠は点線で描かれる。点と点の間は背景色が適用される。

dashed

枠は破線で描かれる。線と線の間は背景色が適用される。

solid

枠は実線で描かれる。

double

枠は二重線で描かれる。指定した枠の幅の中に 2 本の線が引かれることになる。2 本の線の間は背景色で塗りつぶされる。

groove

枠は溝を掘ったように表現される。このときの枠の色は，指定された色を基調とする。

rigde

groove の逆で，枠の部分が盛り上がっているように表現される。このときの枠の色は，指定された色を基調とする。

inset

枠は，要素が一段低いところにあるように描かれる。このときの枠の色は，指定された色を基調とする。

outset

inset の逆で，枠は，要素が一段低いところにあるように描かれる。このときの枠の色は，指定された色を基調とする。

から 1 つである。

　ここで，枠のスタイルに関するプロパティの初期値が none であることに注意されたい。すなわち，枠の太さおよび色を指定しても，枠のスタイルを指定しないと結局枠は描かれないということである。

　また，ブラウザによっては，dotted，dashed，double，groove，ridge，inset または outset の値を solid として扱う場合がある（それでも間違った実装ではない）。

border-style: 全辺の枠のスタイル;
border-style: 上下辺の枠のスタイル 左右辺の枠のスタイル;
border-style: 上辺の枠のスタイル 左右辺の枠のスタイル 下辺の枠のスタイル;
border-style: 上辺の枠のスタイル 右辺の枠のスタイル 下辺の枠のスタイル 左辺の枠のスタイル;

それぞれの値は，各辺の枠のスタイルを指定するプロパティに対するものに準じ，上述したキーワードである。与える値の数と対応する辺の関係は，padding 短縮プロパティの場合と同じである。

　枠のスタイルがお手持ちの環境でどのように出力されるか見てみよう（例では ID セレクタを使用している）。

#none-border { border-style: none; /* 値は 1 つなので全辺を同時に指定している */ }
#hidden-border { border-style: hidden; }
#dotted-border { border-style: dotted; }
#dashed-border { border-style: dashed; }
#solid-border { border-style: solid; }
#double-border { border-style: double; }
#groove-border { border-style: groove; }
#ridge-border { border-style: ridge; }
#inset-border { border-style: inset; }
#outset-border { border-style: outset; }
P { background: #99F; padding: 0.3em; }

<P ID="none-border">"Border-style" is "none."</P>
<P ID="hidden-border">"Border-style" is "hidden."</P>
<P ID="dotted-border">"Border-style" is "dotted."</P>
<P ID="dashed-border">"Border-style" is "dashed."</P>
<P ID="solid-border">"Border-style" is "solid."</P>
<P ID="double-border">"Border-style" is "double."</P>
<P ID="groove-border">"Border-style" is "groove."</P>
<P ID="ridge-border">"Border-style" is "ridge."</P>
<P ID="inset-border">"Border-style" is "inset."</P>
<P ID="outset-border">"Border-style" is "outset."</P>