ボックスの枠線幅を指定する

書式
border-width: 全幅
border-top-width: 上幅
border-right-width: 右幅
border-bottom-width: 下幅
border-left-width: 左幅
枠線の太さを指定します。それぞれ値には数値を入れます。
スタイルシート部分
.boxsample1 {
border-width: 10px;
background-color: #ffffcc;
border-style: solid;
border-color: #ffcc00
}
.boxsample2 {
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 00px;
border-left-width: 0px;
background-color: #ffffcc;
border-style: solid;
border-color: #ffcc00
}
boxsample1では全枠幅を10pxに指定し、boxsample2ではそれぞれに枠線幅を指定しました。
記事部分
<p class = "boxsample1">このボックス領域の枠線幅は一括して指定しました。</p>
<p class = "boxsample2">このボックス領域の枠線幅は上、右、下、左それぞれ指定しました。</p>
表示

このボックス領域の枠線幅は一括して指定しました。

このボックス領域の枠線幅は上、右、下、左それぞれ指定しました。

記事を飾ろう!トップ
マージン、パディング基礎
背景色を指定する
背景画像を指定する
枠線幅を指定する
枠線色を指定する
枠線の種類を指定する
枠線ごとに一括指定する
幅、高さを指定する
ボックスサンプル集

次のキーワードを検索:[スタイルシート]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。