ボーダーの幅、線種、色の設定
border-width: border-style: border-color:
| borderプロパティ | 説明 | プロパティの値 |
|---|---|---|
| border | 四辺のボーダー | border-width // ボーダーの幅 border-style // ボーダーの種類 border-color // ボーダーの色 上記,三つのプロパティの値を順不同で まとめて指定することができます。 border:2px solid lime;border-top:red solid 15px; |
| border-top | 上のボーダー | |
| border-right | 右のボーダー | |
| border-bottom | 下のボーダー | |
| border-left | 左のボーダー |
（枠線0) border:2px solid lime; // 幅 "2px" 種類 "実線" カラー "lime"
（枠線1) border:6px dotted maroon; // 幅 "6px" 種類 "点線" カラー "maroon"
（枠線2）border-left:15px solid purple; border-bottom:1px solid purple;
（枠線3）枠線を太く して、上下・左右の色を変えてみました。
枠線が斜めになって接しています。これは使えそう！吹き出しポップアップ
（枠線4）上・枠線を透明に,右は指定を外し,下は太さを１ｐｘに色は左に合わせます。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<html>
<head>
<title>borderプロパティ 枠線の指定</title>
<style type="text/css">
<!--
#bDer0{ border: 2px solid lime;
padding:4px; }
#bDer1{ border: 6px dotted maroon;
padding: 4px; }
#bDer2{ border-left: 15px solid purple;
border-bottom: 1px solid purple;
padding: 4px; }
#bDer3{ border-top: 7px solid fuchsia; /*枠線 上*/
border-right: 15px solid purple; /*枠線 右*/
border-bottom: 15px solid fuchsia; /*枠線 下*/
border-left: 15px solid purple; /*枠線 左*/
width: 520px; padding : 4px; }
#bDer4{ border-top: 7px solid transparent;/*transparent(透明)*/
border-bottom: 1px solid purple;
border-left: 15px solid purple;
width: 560px; padding : 2px; }
-->
</style>
</head>
<body>
<p id="bDer0">（枠線0) </p>
<p id="bDer1">（枠線1) </p>
<p id="bDer2">（枠線2）</p>
<p id="bDer3">（枠線3）</p>
<p id="bDer4">（枠線4）</p>
</body>
</html>border プロパティ
上下左右のボーダーを一括して指定します。border-width // ボーダーの幅
border-style // ボーダーの種類
border-color // ボーダーの色
上記の値を順不同でスペースで区切って記述します。
border: 3px solid #fa8074;border-top ・ border-right ・border-bottom ・border-left
上右下左のボーダーに異なる値を指定します。border-top:3px solid red;
border-right:4px dotted green;
border-bottom:5px dashed deeppink;
border-left:6px double blue;
border-width
ボーダーの幅を指定します。border-color:lime;
border-style:solid;
border-width:5px 15px; // （上下）（左右）border-widthの値 // 数値＋px,em,など | キーワード。
１つ（上下左右）
２つ（上下）（左右）
３つ（上）（左右）（下）
４つ (上) (右) (下) (左)
※
border-***-width:値; *** にtop,right,bottom,leftのいずれかを入れて個別に指定することができます。
border-style
ボーダーの線種を指定します。border-color:aqua;
border-width:5px;border-style:solid dotted double; //（上）（左右）（下）border-styleの値 // solid(実線), dotted（点線）など。１つ（上下左右）
２つ（上下）（左右）
３つ（上）（左右）（下）
４つ (上) (右) (下) (左)
※
border-***-style:値; *** にtop,right,bottom,leftのいずれかを入れて個別に指定することができます。
border-color
ボーダーの色を指定します。border-width:20px;border-style:solid;border-color:transparent maroon transparent;
transparent(透明)を設定しているのでこのように見えます。※
border-colorの値 // 色の名前、カラーコード１つ（上下左右）
２つ（上下）（左右）
３つ（上）（左右）（下）
４つ (上) (右) (下) (左)
※
border-***-color:値; *** にtop,right,bottom,leftのいずれかを入れて個別に指定することができます。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
border-styleプロパティ
paddingプロパティ ボックスの内側の余白
text-align プロパティ
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
a:hoverで、へこむアンカーテキスト、リンクボタン
