CSS

CSS|borderに関する3つのプロパティ

要素の境界線を表示するborderプロパティには、3つの関連したプロパティがあります。ここでは3つのプロパティの使い方とショートハンドについてお話します。

コンテンツ

線の色を決めるborder-colorプロパティ

border-colorプロパティは線の色を指定するプロパティです。border-color:#000000;といった形でカラーコードなどを指定しましょう。

#00B66B
#0A96D7
#d7b20a
#d70a96

 

カラーコードのことが良く分からないという方はこちらもご参照ください。

線の幅を指定するborder-widthプロパティ

border-widthプロパティは、線の太さを指定するプロパティです。border-width:3px;といった形で「px」で指定するといいですね。

1px
3px
5px
10px

線のスタイルを指定するborder-styleプロパティ

線の種類は一般的な「実線」の他にも「点線」「破線」といった種類があります。border-style:solid;という形で指定します。下記に一覧を表示させてみたのでご覧ください。

solid
dotted
dashed
double
inset
outset

線の幅・スタイル・カラーを同時に指定できるborderプロパティ

borderプロパティを使うと、上記でお話した3つのプロパティをショートハンドすることができます。borderのあとにwidth, stylr, colorの3つの値を順番に関係なく半角スペースを空けて記入しましょう。

例:
CSS

.example01{
  border:#0A96D7 6px solid;
}
.example02{
  border:solid #0A96D7 6px;
}
.example03{
  border:#0A96D7 6px solid;
}
example01
example02
example03

上記は、値の順番がすべてバラバラになっていますが値そのものが同じなのですべて線のデザインが同じになります。

borderを表示したい辺を指定するプロパティ

borderの指定は四辺だけでなく、上下左右を個別に指定することもできます。

それぞれ
上:border-top、下:border-bottom、右:border-right、左:border-left(左)
という形で指定します。さらに細かくborder-top-color, border-top-width, border-top-styleなどの指定も可能ですが、ここまでお読みでしたらショートハンドを使った方が効率的だというのはお分かりですね。

top
right
bottom
left

以上がborderに関するプロパティのお話でした。いかがだったでしょうか?今まで何となく使いこなせてきたborderプロパティでも意外と知らなかったこともあったのではないでしょうか。最後までお読みいただきましたありがとうございます。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP