CSS 略式枠線属性

CSS Border - 簡写属性

前章で見たように、縁を処理する際には多くの属性を考慮する必要があります。

コードを短くするために、すべての単一の縁属性を一つの属性で指定することもできます。

border 属性は以下の各縁属性のショートカット属性です：

  • border-width
  • border-style（必須）
  • border-color

例

p {
  border: 5px solid red;
}

結果：

一部のテキスト

自分で試してみる

また、各縁のすべての単一の縁属性を指定することもできます：

左縁

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

結果：

一部のテキスト

自分で試してみる

下縁

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

結果：

一部のテキスト

自分で試してみる