【CSS入門】border（枠線）とborder-radius（角丸）について学ぶ

この記事ではCSSのborderに関連するプロパティについて解説します。

borderとは？

CSSでレイアウトをする際、下図のようなボックスモデルと呼ばれる余白の考え方を理解する必要があります。

その中でborderは要素の枠線を指定するのに使います。

そしてborder」は個々のborderプロパティを一括指定できるショートハンドで、要素の枠線（ボーダー）を作るときは基本的にこのショートハンドで指定します。

CSS

border: 太さ スタイル 色;
 
border: 1px solid #000;

プロパティの値は順不同で半角スペース区切りで指定でき、省略した値はそのプロパティのデフォルト値が適用されます。

border-*-*

ちなみに、borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。

上下左右で変えたい場合はそれぞれ指定します。下記の場合ボーダーの上と下だけを個別で指定しています。

CSS

.BOX-A{
  border-top-width: 5px;
  border-top-style: double;
  border-top-color: #00a3d3;

  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: black; 
}

borderプロパティ詳細

borderで使用するプロパティは以下の通りです。

border-width

ボーダーの太さを指定します。

border-widthだけ指定してもボーダーは表示されないので必ず同時にボーダーのスタイルも指定してください。border-widthに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

HTML

<div class="BOX-A">BOX-A</div>

CSS

.BOX-A{
   border-width: 5px;
　　border-style: solid;
}

border-style

ボーダーのスタイルを指定します。

border-styleに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

CSS

.BOX-A{
 　　　　border-style: solid;
}

border-color

ボーダーの色を指定します。デフォルトの色は、その要素に指定されているcolor(文字色)です。

border-colorだけ指定してもボーダーは表示されないので、必ず同時にボーダーのスタイルも指定してください。border-colorに指定できる値は以下の通りです。

実際に使用するときは以下のように記述します。

CSS

.BOX-A{
  border-style: solid;
  border-color: blue;
}

border関連のプロパティ

以下のプロパティも、border関連でよく使いますので、覚えておきましょう。

border-radius

要素の四隅の角を丸めます。

border-radiusに指定できる値は以下の通りです。

%で指定する場合は、要素の幅または高さに対する値になります。

実際に使用するときは以下のように記述します。

CSS

.BOX-A{
  width:300px;
  height:300px;
  background: #9bc0e0;
  border-radius: 20px 80px;
}

楕円で丸める

上のように記述をすると正円をベースにした角丸ができますが、スラッシュ(/)で区切った値を指定すると、楕円ベースの角丸も指定することができます。

スラッシュより前に楕円の横の半径を、後ろに縦の半径を記述します。以下の場合、左上と右下に横半径20px・縦半径40pxの楕円で。 右上と右下に横半径80px・縦半径160pxの楕円で角を丸めます。

CSS

.BOX-A{
  width:300px;
  height:300px;
  background: #9bc0e0;
  border-radius: 20px 80px / 40px 160px;
}

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の1点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。