ネイティブの破線境界プロパティ値では、破線自体を制御できません... そのため、border-imageプロパティを使用してください。

自分だけの境界線を作ろうborder-image

互換性:優れたブラウザ サポートを提供します(IE 11 およびすべての最新ブラウザ)。通常の境界線は、古いブラウザのフォールバックとして設定できます。

これらを作成してみましょう

これらの境界線は、ブラウザ間でまったく同じように表示されます。

ステップ1 - 適切な画像を作成する

この例は幅 15 ピクセル、高さ 15 ピクセルで、ギャップの幅は現在 5 ピクセルです。これは透明な .png です。

Photoshop で拡大すると次のようになります。

スケールすると次のようになります。

ギャップとストロークの長さを制御する

より広い/より短いギャップまたはストロークを作成するには、画像内のギャップまたはストロークを広げる/短くします。

以下は、10 ピクセルの広いギャップを持つ画像です。

正しくスケールされた =

ステップ2 - CSSを作成する - この例では4つの基本的なステップが必要です

1. border-image-sourceを定義します。

    border-image-source:url("https://i.sstatic.net/wLdVc.png");  
   

2. オプション- border-image-widthを定義します:

    border-image-width: 1;
   

   デフォルト値は 1 です。ピクセル値、パーセンテージ値、または別の倍数 (1 倍、2 倍、3 倍など) で設定することもできます。これは、すべてのborder-width設定を上書きします。

3. border-image-sliceを定義します。

この例では、画像の上、右、下、左の境界線の太さは 2 ピクセルで、その外側に隙間がないので、スライス値は 2 になります。

    border-image-slice: 2; 

スライスは、上、右、下、左から 2 ピクセルずつ次のようになります。

4. border-image-repeatを定義します。

この例では、div の周囲でパターンを均等に繰り返す必要があります。そのため、次のように選択します。

    border-image-repeat: round;

速記の書き方

上記のプロパティは個別に設定することも、border-imageを使用してショートカットで設定することもできます。

border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;

完全な例

注:初期の境界線スタイルは であるため、 はまたは などborder-styleの値に設定する必要があります。または、この例のようにフォールバック境界線を追加することもできます。サポートされていないブラウザーにはこの境界線が表示されます。soliddashednoneborder: dashed 4px #000

.bordered {
  display: inline-block;
  padding: 20px;
  /* Optional: 
     A normal dashed border can be set as a fallback, particularly if older browsers need to be supported. Notes:
     - the 4px width here is overwritten with any border-image-width value
     - a border-image-width can be omitted if it is the same value as the dashed border width
  */
  border: dashed 4px #000;/*optional*/

  /* the initial value of border-style is "none", so it must be set to a different value for the border-image to show*/
  border-style: dashed;

  /* Individual border image properties */
  border-image-source: url("https://i.sstatic.net/wLdVc.png");
  border-image-slice: 2;
  border-image-repeat: round;

  /* or use the shorthand border-image */
  border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;
}


/*The border image of this one creates wider gaps*/

.largeGaps {
  border-image-source: url("https://i.sstatic.net/LKclP.png");
  margin: 0 20px;
}

<div class="bordered">This is bordered!</div>

<div class="bordered largeGaps">This is bordered and has larger gaps!</div>