CSSプロパティ

CSS - border-left

概要

CSSプロパティ｢border-left｣は、要素の左辺の境界線（ボーダー）の太さ（border-width）、スタイル（border-style）、色（border-color）をまとめて指定するショートハンドプロパティです。左辺の他、border- top, border-bottom, border-right プロパティがあります。

また４辺をまとめて指定する場合は、border プロパティを使用します。

<div class="border-left">border-leftを指定した要素</div>
<style>
.border-left {
  border-left: 3px solid #000;
}
</style>

値の指定方法

順番は順不同でいれることができます。もし、指定をしなかった場合はそのプロパティの初期値が入ります。またその中の｢スタイル｣は、指定をしないと初期値が｢none｣なので、表示がされませんので気をつけましょう。

{ border-left: 値 スタイル 色 }

値について

指定できる値の種類です。

値説明
value単位はpx, emなどが可能です。マイナス値は入れられません
keywordthin, medium, thickが入ります

スタイルについて

指定できるスタイルは以下の通りです。それぞれの表示は border-style で詳しく解説しています。

値説明
noneボーダーは表示されません
solid一本線のボーダーが表示されます
dotted１列にならんだドット模様のボーダーが表示されます
dashed破線のボーダーが表示されます
double二本線のボーダーが表示されます
groove立体的で窪んだ線が表示されます
ridge 立体的で隆起した線が表示されます
insetgrooveと似てますが立体的で窪んだ線が表示されます
outsetridgeと似てますが、立体的で隆起した線が表示されます

色について

指定できる色の種類です。

値説明
color 色を指定します. #000000やrgb(0,0,0)でも指定できます

プロパティの種類について

｢border｣ プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます（指定可のみ）。それぞれのプロパティをまとめた一覧になりますので確認してみてください。

プロパティ名４辺一括で指定される内容細分化プロパティ名
borderボーダーの太さ、スタイル、色を指定できる4辺指定可。border-top、border-bottom、border-left、border-right
border-width太さを指定できる4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width
border-styleスタイルを指定できる4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style
border-color色を指定できる4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color
border-image背景を指定できる4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat

使用例

実はこのサイトの見出しでも使用されています。｢border-left｣ プロパティで左の装飾線を、 border-bottom プロパティで下線を表現しています。

<h1 class="border-left">見出し1</h1>
<p>ようこそWWWクリエイターズへ</p>
<style>
h1 {
  font-weight: bold;
  padding: 0 0 6px 20px;
  position: relative;
  border-bottom: 2px solid #e84c29;
}
h1:after {
display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 3px solid #f87f7f;
}
.border-left {
  border-left: 8px solid #e84c29;
}

</style>

仕様書

CSS Backgrounds and Borders Module Level 3

CSS Level 2 (Revision 1)

CSS Level 1

関連CSSプロパティ