CSS 枠線の各辺

CSS辺框 - 単独の辺

前章の例では、各側に異なる辺框を指定できることをご覧になりました。

CSSでは、各辺框（上、右、下、左）を指定するための属性もあります：

例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

結果：

異なる辺框のスタイル

自分で試してみてください

異なる辺框のスタイル

上の例の結果はこれと同じです：

例

p {
  border-style: dotted solid;
}

自分で試してみてください

その動作原理は以下の通りです：

右側と左側のボーダーが実線です border-style 属性は四つの値を設定します：

border-style: dotted solid double dashed;

  • 上边框は点線です
  • 右辺框は実線です
  • 下边框は二本線です
  • 左辺框は点線です

右側と左側のボーダーが実線です border-style 属性は三つの値を設定します：

border-style: dotted solid double;

  • 上边框は点線です
  • 上側と下側のボーダーが点線です
  • 下边框は二本線です

右側と左側のボーダーが実線です border-style 属性设置两个值：

border-style: dotted solid;

  • 属性に2つの値を設定します：
  • 上側と下側のボーダーが点線です

右側と左側のボーダーが実線です border-style 属性に1つの値を設定します：

border-style: dotted;

  • すべての4つの辺が点線です

例

/* 4つの値 */
p {
  border-style: dotted solid double dashed; 
}
/* 3つの値 */
p {
  border-style: dotted solid double; 
}
/* 2つの値 */
p {
  border-style: dotted solid; 
}
/* 1つの値 */
p {
  border-style: dotted; 
}

自分で試してみてください

の例では使用されています border-style 属性ですが、 border-width および border-color 同様に適用されます。