borderショートハンドプロパティ
アセンブラの魔女 ⧫ CSS ⧫ ボックス・モデル ⧫ ボーダープロパティ ⧫ borderショートハンドプロパティ
アセンブラの魔女 ⧫ CSS ⧫ ボックス・モデル ⧫ ボーダープロパティ ⧫ borderショートハンドプロパティ

 borderショートハンドプロパティはボックスのすべてのボーダー全領域(top, right, bottom, left)のwidth, style, colorを指定します。

値 [ <border-width>|| <border-style>|| <border-color> ] | inherit
初期値 border-widthプロパティ, border-styleプロパティ, border-colorプロパティの説明をご覧ください
適用可能な要素すべての要素
継承のデフォルト動作継承しない
パーセンテージ値指定不可
メディアグループvisual
計算値border-widthプロパティ, border-styleプロパティ, border-colorプロパティの説明をご覧ください

 省略された値は初期値が適用されます。

h1.test1 { border: thick solid red }
h1.test2 { border: thick solid}

 上記のスタイルシートを、以下のHTMLで使うと、

<h1 class="test3">H1要素</H1>

 次のように表示されます。

test1

test2

 test1クラスのH1要素ではすべての値が指定されていますが、test2クラスでは色の指定を省略していますので初期値が適用されます。

▼ Property
記事情報
datePublished2011-01-01
dateModified2018-06-22
authorアセンブラの魔女
headlineCSSのborderショートハンドプロパティに関する記事です
keywordsCSS
keywordsCascading Style Sheets
keywordsボーダー
keywordsプロパティ
keywordsborderショートハンドプロパティ
publisher name= wiredFish, logo.name= wiredFish, logo.url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png size= 208 pixel x 50 pixel
image.url url= https://books-nekoya.jp/Programming/chigu-hagu-title-01.png , size= 208 pixel x 50 pixel