JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのborder-styleプロパティで2本線のボーダー（二重線）を設定する方法

CSSで2本線のボーダーを設定するには

CSSで2本の線からなるボーダー（境界線）を表示するには、border-styleプロパティにdoubleを指定します。doubleは要素の周囲に2本の実線を引く値で、線と線の間に隙間ができるのが特徴です。なお、2本の線をはっきりと表示させるためには、border-widthである程度の太さ（目安として3px以上）を設定しておく必要があります。

サンプルコード

<html>
   <head>
   </head>
   <body>
      <p style = "border-width:4px; border-style:none;">
         スタイルなし（ボーダーは表示されません）
      </p>
      <p style = "border-width:4px; border-style:double;">
         2本の実線からなるボーダーです。
      </p>
   </body>
</html>

コードの解説

上記の例では、1つ目の段落にborder-style: noneを指定しているためボーダーは表示されません。一方、2つ目の段落ではborder-style: doubleを指定しているため、幅4pxのボーダーが2本の実線として描画されます。

doubleを使う際のポイントは次の通りです。

  • 線の太さ： border-widthが細すぎると2本の線が判別できず、1本の線のように見えてしまいます。3px以上の太さを推奨します。
  • 線の色： border-colorプロパティを組み合わせれば、ボーダーの色を自由に変更できます。
  • 対応状況： doubleは主要なすべてのブラウザでサポートされている標準的な値です。
  1. CSSで左上の角を丸くする方法｜border-top-left-radiusの使い方

    要素の左上の角だけを丸くしたい場合は、CSSの border-top-left-radius プロパティを使用します。このプロパティを使うことで、要素全体の角ではなく、左上のコーナーのみに個別の角丸を適用できます。以下は、border-top-left-radius プロパティを使って左上の角を丸くする具体的なコード例です。実際にブラウザで実行して、表示結果を確認してみてください。コード例<html>    <head>       <style>         &n

  2. CSSで右上の角丸を設定する方法｜border-top-right-radiusの使い方

    CSSで要素の右上の角だけを丸くしたい場合は、border-top-right-radiusプロパティを使用します。このプロパティを指定すると、右上隅のみに丸みを帯びた境界線を設定でき、ボックス全体のデザインに柔らかさやアクセントを加えることができます。border-top-right-radiusの基本border-top-right-radiusには、px・em・%などの単位で値を指定します。値が大きいほど角の丸みが大きくなり、0を指定すると直角に戻ります。サンプルコード以下のコードは、border-top-right-radiusプロパティを使って右上の角だけを大きく丸める実装例です。&