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 […]

続きを読む