Unformed Building

border:0とborder:noneは何が違うのか

公開:
更新:

パーマリンク

ボーダーのスタイルをリセットする場合などに使われる指定について。
border: 0border: noneどちらを使いますか? ということではなく、この2つはどう違うのか、という話です。

borderプロパティについてですが、これは4つのボーダーの指定をまとめて行うショートハンドプロパティです。
構文としては次のようになります。
(参考:CSS 2.1 Box model, CSS Backgrounds and Borders Module Level 3

// CSS 2.1
[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

// CSS Backgrounds and Borders Module Level 3
<border-width> || <border-style> || <color>

若干構文が違いますが、結果は同じです。

Borders Module Level 3にinheritキーワードがないのはall properties accept the ‘initial’ and ‘inherit’ keywordsCSS Values and Units Module Level 3)だからですね。

今回は関係ないですが、色の指定部分についても。
CSS 2.1では<‘border-top-color’>となっていますが、これはborder-top-colorプロパティに指定できる値と同じ値が指定できるという意味です。で、border-top-colorに指定できるものは

<color> | transparent | inherit

となります。

Borders Module Level 3は<color>なので分かりやすいですね。transparentキーワードは<color>に含まれます。
(参考:CSS Values and Units Module Level 3, CSS Color Module Level 3

それでは本題に。
まずはborder: 0から。

0は<length>なので、これはborder-widthに指定される値ですね。
<border-width> = <length> | thin | medium | thickなので。<border-style>形式はキーワードのみで構成されているので当てはまりません。

ついでに書いておくと、0に単位をつけなくてもいいのはAfter a zero length, the unit identifier is optionalだからです。
(参考:Syntax and basic data types, CSS Values and Units Module Level 3

次に<border-width>を使用するborder-*-widthプロパティの部分を見ると、Computed valueの部分にabsolute length; ‘0’ if the border style is ‘none’ or ‘hidden’と書かれています。
つまり、border-styleの値がnoneまたはhiddenの場合には、border-*-width0になるということです。

これでborder: 0でもborder: noneでもボーダーが表示されなくなる理由は分かりました。
<border-style>の箇所を見ても、noneキーワードの説明にはNo border; the computed border width is zero.となっています。
ただし、Borders Module Level 3の場合にはちょっと違っていて「ボーダーが画像でない限りは」という注意書きがあります。

また、border-*-styleの初期値はnoneキーワードなので、border: 1px redなどと書いても、元々ボーダーが指定されていない要素にボーダーはつきません。

以上です。


ちょっと追加。

一言で言うと、border:0 は border-width, border:none は border-style という話です。

@ub_pnr https://twitter.com/ub_pnr/status/321095441280274432