【CSS】borderの使い方

こんにちは！Kです！

今回は、cssにおけるborderプロパティの使い方について説明したいと思います。

borderプロパティはよく使うプロパティなので、ぜひ使えるようになりましょう！

borderとは？

borderはざっくりいうと枠線のことです。

いろんなWebサイトで実際に使われており、領域の境界線が分かるようにします。

例えば以下のような感じです。

borderプロパティで枠線を表示する：領域1

borderプロパティで枠線を表示する：領域2

こんな感じで枠線を描写できます。

borderの基本的な使い方

実際にcssファイルにborderを設定するときによく使う書き方を紹介します。

枠線の引き方を指定して見えるようにする

border: solid;

「solid」は通常の1本線です。
それ以外でよく見るもので以下があります。

・double ：2本線
・dashed ：破線
・dotted ：点線
・groove ：立体的に窪んだ線
・ridge  ：立体的に隆起した線

枠線の太さを指定する

border: 2px solid;

これは1本線を2pxの太さで表示することを示します。
もしくは以下の書き方でも大丈夫です。

border: solid;
border-width: 2px;

枠線の色を指定する

色の指定の仕方も2パターンあります。

border: solid red;

もしくは、

border: solid; 
border-color: red;

一行で枠線の表示方法、太さ、色を指定する

border: 2px solid red;

枠線の角を丸くする

border: solid;
border-radius: 12px;

以上です。
上記で紹介したものはオーソドックスな書き方の一部です。

他にもありますので、実際に表示したいときに調べてみましょう！

最後に

今回はborderの基本的な使い方を説明しました。

ここからいろいろな表示の仕方に応用できるので、まずはこの基本形を覚えておきましょう！

それでは、また！

Follow me!