CSSのborder-colorプロパティ
CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。
構文
CSSborder-colorプロパティの構文は次のとおりです-
Selector {
border-color: /*value*/
} 次の例は、CSSのborder-colorプロパティ-
を示しています。例
<!DOCTYPE html>
<html>
<head>
<style>
span {
margin: 10px;
padding: 20px;
border-style: solid;
border-color: limegreen lightblue crimson;
}
div {
text-align: center;
border-style: solid;
border-color: palevioletred steelblue;
height: 16px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>Demo</div>
<p><span>This</span>is demo text just for displaying how CSS styles works.</p>
</body>
</html> 出力
これにより、次の出力が得られます-
例
<!DOCTYPE html>
<html>
<head>
<style>
li {
border-bottom-color: cyan;
border-bottom-style: dotted;
width: 300px;
}
p {
text-align: center;
border-width: 8px;
border-style: solid;
border-color: #d11c74;
border-left-style: ridge;
}
</style>
</head>
<body>
<h2>Accessories</h2>
<p>Displaying the car accessories</p>
<ul>
<li>Mud Flap</li>
<li>Car Freshener</li>
<li>Mobile Holder</li>
<li>Bluetooth</li>
<li>Wheel Lock</li>
</ul>
</body>
</html> 出力
これにより、次の出力が得られます-
-
CSSのoutline-widthプロパティ
overlay-widthプロパティは、要素の境界の周りに特定の太さの線を描画するように定義できますが、borderプロパティとは異なり、アウトラインは要素の寸法の一部ではありません。 構文 CSSのoutline-widthプロパティの構文は次のとおりです- Selector { outline-width: /*value*/ } 注- アウトラインスタイルプロパティは、アウトライン幅を宣言する前に定義する必要があります。 アウトライン幅プロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <hea
-
CSSのborder-styleプロパティ
CSS border-styleプロパティは、要素の境界線スタイルを指定するために使用されます。また、border-topスタイル、border-rightスタイル、border-leftスタイル、border-rightスタイルのプロパティを使用して、個々の辺の境界線スタイルを定義することもできます。 構文 CSSボーダープロパティの構文は次のとおりです- Selector { border: /*value*/ } 次の例は、CSSボーダースタイルのプロパティ-を示しています。 例 <!DOCTYPE html> <html> <