このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border:境界線

記事Dec. 5th,2020
ボーダー、境界線を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 border-width: medium;
border-style: none;
border-color: currentColor;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

border”プロパティは要素の境界線の太さ、見た目、色を指定する以下のプロパティの一括指定プロパティです。

CSSのボックスモデル

margin”プロパティpadding”プロパティとは異なり、“border”プロパティで四辺の境界線を一辺ずつ指定することはできません。境界線を一辺ずつ指定するにはborder-top”プロパティborder-right”プロパティborder-bottom”プロパティborder-left”プロパティを使用します。

サンプルコード

div { border: 5px dotted rgb(204,153,204);}

説明
<line-width> border-width”プロパティの値
<line-style> border-style”プロパティの値
<color> rgb()”関数や16進数カラーコード、カラーネームなどで境界線の色を指定 (border-color”プロパティの値)
共通キーワード

<line-width>”値<line-style>”値<color>”値を半角スペース(“ ”)で区切って1個ずつ指定できます。値を記述する順番は自由で、初期値のままで良い値は省略できます。ただし、<line-style>”値を指定しない場合は既定値が境界線を表示しない“none”のため、境界線が表示されません。

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border
定義あり

定義あり

定義あり

使用例

境界線を指定する

div {
border: 5px dotted rgb(204,153,204);
}
border: 5px dotted rgb(204,153,204);
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク