CSSのborderショートハンド（一括指定）プロパティの使い方
borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。
構文
CSSのborderプロパティは、次のように記述します。
セレクタ {
border: /*値*/
}値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれば、「太さ2ピクセル・実線・オレンジ色」の枠線が適用されます。
サンプルコード1：画像にボーダーを適用する
以下の例では、img要素に対してborderプロパティを使用しています。
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin-top: 14px;
margin-left: 30px;
border: 2px solid orange;
box-shadow: 0 0 12px 1px black;
}
#demo {
border: 4px dotted magenta;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg">
<img id="demo" src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>表示結果
このコードをブラウザで表示すると、次のようになります。
最初の画像にはオレンジ色の実線（solid）、ID「demo」が付いた画像にはマゼンタ色の点線（dotted）の枠線が適用されていることが確認できます。
サンプルコード2：表にボーダーを適用する
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 1em;
border: 3px dashed green;
}
td {
font-size: 24px;
border: 2px double navy;
}
</style>
</head>
<body>
<table>
<tr>
<td>This</td>
<td>text</td>
</tr>
<tr>
<td>is</td>
<td>demo</td>
</tr>
</table>
</body>
</html>表示結果
このコードをブラウザで表示すると、次のようになります。
table要素には緑色の破線（dashed）、td要素には紺色の二重線（double）の枠線が適用されます。このようにborderプロパティを使えば、solid・dotted・dashed・doubleなどさまざまな線種を組み合わせて、要素の種類やデザインの目的に応じた柔軟な枠線を簡単に実現できます。
-
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da