CSS-border備忘録

wordpressをサーバーOSの設定から始めるIT系ファシリテーターです。

プログラミングとか、物づくりとかって仕様が決まるとある程度答えまでの道筋が見えるもんですが、ファシリテーションはその場の人でコロコロ変わるから面白いですね。

それはさておき・・・
ホームページやブログのデザインとは切り離せないCSSの備忘録。
webのフロントだけやり続けていれば覚えているんでしょうが、間空いて触るので備忘録作成。

「CSS」「スタイルシート」って何?って方は面白くないので別記事へどうぞ。

borderのプロパティ

要素を囲む上下左右4箇所毎に指定可能。
4箇所の枠線をまとめて定義する事も、個別に定義する事も可能。
また、下記4つのプロパティにおいてもまとめて定義or個別定義が可能。

  • スタイル
  • 太さ

プロパティでスタイルのみ設定する時は、上下左右をそれぞれ指定できる。
太さと色はそのまんまなので、スタイルのみもうちょっと書く。

border-style

スタイル。破線、二重線、非表示などを選べる。

  • dashed
  • dotted
  • double
  • groove
  • hidden
  • inset
  • outset
  • ridge
  • solid
  • unset
  • none

それぞれのスタイルがどのようになるのか?は↓へ
立体的な表現にするスタイル(groove、inset、outset、ridge)は、
濃色系だと違いがわかりにくいです。

border-style:dashed;
border-style:dotted;
border-style:double;
border-style:groove;
border-style:hidden;
border-style:inset;
border-style:outset;
border-style:ridge;
border-style:solid;
border-style:unset;
border-style:none;

コメント