点線のCSS 総まとめ！どんな点線ならブラウザで再現できるの？コーディングのしやすさも含めて解説

<p class="dotted">テキストが入ります。テキストが入ります。</p>

.dotted {
  border: 6px dotted #8f6552;
  /* border-radius: 20px;　角丸の場合 */
}

/*上下と左右でスタイル違うバージョン 試す時はクラス名を変えてね*/
.dotted-2way{
  border-width: 6px 3px;
  border-style: dotted solid;
  border-color: #8f6552;
}

<p class="outline">テキストが入ります。テキストが入ります。</p>

.outline {
  outline: 3px dashed #035f9d; 
  outline-offset: -8px; /*プラスなら外側へ、マイナスなら内側へ*/
  background-color: #f0f0f0;
  /* border-radius: 20px;　角丸の場合 */
}

<p class="linear-gradient">テキストが入ります。テキストが入ります。</p>

/* ⑤ linear-gradient(角丸なし) */
.linear-gradient {
  background-image: 
linear-gradient(to right, #556b2f,#556b2f 6px, transparent 6px), /* 上 */ 
linear-gradient(to bottom, #556b2f, #556b2f 6px, transparent 6px), /* 左 */
linear-gradient(to left, #556b2f, #556b2f 6px, transparent 6px), /* 下 */ 
linear-gradient(to top, #556b2f, #556b2f 6px, transparent 6px); /* 右 */
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top, left, bottom, right;
}

/* ⑥ linear-gradient(角丸なし&色付き) */
.linear-gradient-color {
  background-image: 
    repeating-linear-gradient(
      45deg,
      #d4746b,
      #8aae7e 8px,
      transparent 8px,
      transparent 12px
    ),
    /* 上辺 */
      repeating-linear-gradient(
        135deg,
        #d4746b,
        #8aae7e 8px,
        transparent 8px,
        transparent 12px
      ),
    /* 左辺 */
      repeating-linear-gradient(
        225deg,
        #d4746b,
        #8aae7e 8px,
        transparent 8px,
        transparent 12px
      ),
    /* 下辺 */
      repeating-linear-gradient(
        315deg,
        #d4746b,
        #8aae7e 8px,
        transparent 8px,
        transparent 12px
      ); 
    /* 右辺 */
  background-size: 4px 100%, 100% 4px, 4px 100%, 100% 4px; /* 点線の太さ */
  background-position: 0 0, 0 0, 100% 0, 0 100%; /* 位置調整 */
  background-repeat: no-repeat; /* 繰り返し防止 */
}

<p class="linear-gradient-image">テキストが入ります。テキストが入ります。</p>

/* ⑧ linear-gradient(つぶが角丸) */
.linear-gradient-image {
  background-image: url(画像パス);
  background-size: 13px 4px;/*画像の大きさを設定してください*/
  background-repeat: repeat-x;
  background-position: left bottom;/*下線の場合*/
}

<p class="linear-gradient-image all"><span class="tate"></span>テキストが入ります。テキストが入ります。</p>

/* ⑨ linear-gradient(つぶが角丸)※枠の場合 */
/* 四方上 */
.linear-gradient-image.all {
  background-image: url(横用の画像のパス);
  background-size: 13px 4px;
  background-repeat: repeat-x;
  background-position: right top;
  position: relative;
}
/* 四方下 */
.linear-gradient-image.all::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(横用の画像のパス);
  background-size: 13px 4px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
/* 縦線 */
.linear-gradient-image.all span.tate {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 四方左 */
.linear-gradient-image.all span.tate {
  background-image: url(縦用の画像のパス);
  background-size: 4px 13px;
  background-repeat: repeat-y;
  background-position: left bottom;
}
/* 四方右 */
.linear-gradient-image.all span.tate::before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(縦用の画像のパス);
  background-size: 4px 13px;
  background-repeat: repeat-y;
  background-position: right bottom;
}

/***　点線の方眼　***/
body {
  position: relative;
}
body::before,
body::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body::before {
  background-image: linear-gradient(
      180deg,
      transparent 0%,
      transparent 50%,
      #fff 50%,
      #fff 100%
    ),
    /* 線1 */
      linear-gradient(90deg, rgba(128, 128, 128, 0.1) 3px, transparent 3px); /* 線2 */
  background-size: 100% 12px, /* 線1 */ 48px 100%; /* 線2 */
  z-index: -2;
}
body::after {
  background-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 50%,
      #fff 50%,
      #fff 100%
    ),
    linear-gradient(180deg, rgba(128, 128, 128, 0.1) 3px, transparent 3px);
  background-size: 12px 100%, 100% 50px;
  z-index: -2;
}