CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSボーダー（border）プロパティの使い方：基本構文と実例で解説

CSSボーダープロパティとは

CSSのborderプロパティは、要素のボーダー（境界線）を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線のスタイル）、border-color（線の色）の3つのプロパティをまとめて指定できるショートハンド（省略記法）として機能します。

さらに、border-topやborder-rightといった辺ごとの個別プロパティを使えば、要素の特定の辺だけに異なるスタイルを適用することも可能です。

構文

CSS borderプロパティの基本構文は以下の通りです。

Selector {
   border: /*値*/
}

使用例

以下の例では、border-styleやborder-left、border-right、border-top、border-bottomなどを組み合わせて、要素のボーダーをスタイリングしています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   border-style: solid;
   margin: auto;
   padding: 5px;
   border-radius: 50%;
}
#main {
   height: 100px;
   width: 100px;
   border-left: 12px ridge goldenrod;
   border-right: 12px ridge goldenrod;
}
#main > div {
   line-height: 12px;
   height: 30px;
   width: 10px;
   padding: 27px 20px;
   border-top: 6px groove crimson;
   border-bottom: 6px ridge crimson;
}
</style>
</head>
<body>
<div id="main">
<div>i see you</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSボーダー（border）プロパティの使い方：基本構文と実例で解説

使用例：辺ごとの個別指定

次の例では、border-top-width、border-top-style、border-top-colorの3つのプロパティを使って、要素の上辺のみに太いボーダーを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   width: 60%;
   margin: auto;
   padding: 20px 45px;
   border-top-width: 1.4em;
   border-top-style: solid;
   border-top-color: violet;
   border-radius: 85px 85px 0 0;
   color: black;
   font-size: 1.3em;
   background-image: url("https://www.tutorialspoint.com/images/css.png");
}
</style>
</head>
<body>
<p>CSS is used to control the style of a web document in a simple way. It handles the look and feel part of a web page.</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSボーダー（border）プロパティの使い方：基本構文と実例で解説

このようにborderプロパティを使いこなすことで、要素全体に一括でボーダーを設定できるだけでなく、各辺ごとに柔軟なデザインを適用できます。Webページの見た目を整えるうえで、borderは非常によく使われる基本プロパティです。

  1. CSSのアウトライン（outline）とボーダー（border）の違いと使い方

    アウトライン（outline）とは？ CSSのアウトライン（outline）は、要素の周囲に線を引くためのプロパティです。最大の特徴は、レイアウト上のスペースを占有しないという点にあります。ボーダー（border）が設定されている場合は、そのボーダーの外側に描画されます。 アウトラインは、要素を視覚的に強調（ハイライト）する目的でよく使われます。たとえば、キーボード操作でフォーカスを受けたリンクやフォーム部品を目立たせるといった使い方が典型的です。なお、Firefoxなど一部のブラウザでは、フォーカス中の要素に自動的に細いアウトラインが表示されることがあります。 ただし、アウトラインには次のよ

  2. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定