border-top: 上の枠線の色、幅、形状を一括指定
border-topは、上枠線の設定を一括で指定できるプロパティです。スペースで区切って羅列。順番は任意。以下 border: の指定と同様です。
border-top: 値; 上の枠線の一括指定
border-right: 値; 右の枠線の一括指定
border-bottom: 値; 下の枠線の一括指定
border-left: 値; 左の枠線の一括指定
以下のプロパティ値をまとめて設定でます。
border-width
border-style
border-color
border プロパティ仕様
値 | ||
---|---|---|
width | 枠線の幅 | 数値 px / em / % / ex / in / cm / mm / pt / pc キーワード thin / medium / thick |
style | 枠線のスタイル | solid, double, groove, ridge, inset, outset, none |
color | 枠線の色 | #666666, #666, カラーネームgray など |
枠線のスタイル種類一覧は こちらにあります
記述例
サンプル − 個々の枠線を一括指定
sample css ↓
.sample{
border-top: 2px dotted #ff6633;
border-right: 1px solid #009933;
border-bottom: 3px double #3333cc;
border-left: 2px solid gray;
padding: 3px 15px;
}
html ↓
<html>
<body>
<div class="sample">枠線の一括指定
</div>
</body>
</html>
実際の見え方 ↓
枠線の一括指定