CSSで枠線(border)をデザインする方法
CSSでborderプロパティを使用すると、要素の枠線のスタイル、幅、色を指定できます。
四方に境界線があります。
赤い下の境界線があります。
枠線を丸くしました。
CSS 境界線のスタイル
のborder-styleプロパティは、表示する境界線の種類を指定します。
The following values are allowed:
dotted- 点線の境界線を定義しますdashed- 破線の境界線を定義しますsolid- 実線の境界線を定義しますdouble- 二重枠を定義しますgroove- 3D 溝付き境界線を定義します。効果はボーダーカラーの値によって異なります。ridge- 3Dの縁取りを定義します。効果はborder-colorの値によって異なります。inset- 3D 差し込み境界線を定義します。効果はボーダーカラーの値によって異なります。outset- 3D アウトセット境界線を定義します。効果はボーダーカラーの値によって異なります。none- 境界線を定義しませんhidden- 隠し境界線を定義します
border-styleプロパティには、1～4つの値(上境界線、右境界線、下境界線、および左境界線)を指定できます。
例
さまざまな境界線スタイルのデモンストレーション:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
結果：
点線の境界線。
破線の境界線。
しっかりとした境界線。
二重枠です。
溝の境界線。効果は、border-color値によって異なります。
尾根の境界線です。効果は、border-color値によって異なります。
差し込み枠。効果は、border-color値によって異なります。
開始境界線。効果は、border-color値によって異なります。
境界線がない。
ミックスボーダー。
注：他のCSS境界線プロパティ(次の章で詳しく説明します)は、border-styleプロパティが設定されていない限り、何の効果もありません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。