CSSのborderプロパティの使い方 基本から上下左右の見た目を変更まで

borderプロパティの基本

borderプロパティは、次のように指定します。

border: 幅 線種 線色;

幅・線種・線色は順不同です。

単位をpxやthin(細い)、medium(普通)、thick(太い)で指定します。
※他の単位でも指定できますが、予期しない太さで表示される可能性があります。

pxで指定した場合、1から増えるごとに太くなります。

線種

線のタイプを指定します。

線種 タイプ 実例
none 線なし
 
solid 実線
 
dashed 破線
 
dotted 点線
 
double 二重線
 
groove くぼみ
 
ridge 浮きだし
 
inset 立体くぼみ
 
outset 立体浮きだし
 

double以降の線種で見た目に変化を出すには、十分な太さを指定する必要があります。

線色

色のコードを指定します。
透過させることも可能です。

CSSの色指定がよくわからない方は、こちらをご覧ください。

cssの色指定は難しくない!ざっくり解説します

cssの色指定は難しくない!ざっくり解説します

Webサイトの色は、CSS(スタイル)で指定します。 しかし色の指定方法が独特で、はじめはよくわからないですね。 そこで今回は、CSSでの色指定についてざっくり解説します。 CSSをカラーコードで指定する CSSで色を表 […]

続きを読む

幅・線種・線色を個別に指定

幅・線種・線色は、他のプロパティを使用することで、個別に設定することができます。

属性 プロパティ
border-width
線種 border-style
線色 border-color
CSS

.smallbox{
border-width: 10px;
border-style: solid;
border-color: #FF0000;
height:50px;
width:50px;
}

 

左右上下の線を個別に指定する

枠線は、上下左右個別に指定することができます。
この場合、borderプロパティではなく、それぞれ対応するプロパティを使用します。

位置 プロパティ 実例
上線 border-top
 
下線 border-bottom
 
左線 border-left
 
右線 border-right
 
CSS

.smallbox4{
border-top: 13px double #32F522;
border-bottom: 15px dotted #f2a522;
border-left: 13px dashed #32a5F2;
border-right:11px solid transparent;
height:80px;
width:150px;
}

 

ボーダーと背景描画の範囲

太いボーダーで線種にdottedやdoubleを指定したり、透過色を指定すると、内側の背景がボーダー側にはみ出すことがあります。

実ははみ出すかどうかも、CSSで指定することができます。

background-clip: 範囲指定値;
範囲指定値 範囲 実例
border-box ボーダー内に背景を描画
 
padding-box ボーダーを含まずに背景を描画
 
content-box パディングを含まずに背景を描画
 

まとめ

CSSのborderプロパティの使い方をざくりとお伝えしました。

borderプロパティを使用すると、三角形を作ることができます。
こちらの記事をチェックしてみてください。

CSSのborderで三角形の作り方をざっくり解説します

CSSのborderで三角形の作り方をざっくり解説します

吹き出しなどの三角形をCSSだけで表現する方法として、borderプロパティが使用されていることが多いです。 一見複雑なことをやっている印象ですが、実はとても単純です。 一目でわかるborder三角形の仕組み こんなCS […]

続きを読む