【border】ボーダーのCSS10選！シンプルで汎用性抜群のアイデア！

<div class="box-basic">シンプルな角丸ボーダー</div>

.box-basic {
  border: 2px solid #4f46e5; /* 線の太さと色 */
  border-radius: 20px;        /* 4辺すべて20pxの角丸 */
  padding: 16px;
  text-align: center;
}

<div class="box-dotted">点線ボーダー</div>

<div class="box-dashed">破線ボーダー</div>

.box-dotted {
  border: 4px dotted #059669; /* 点線 */
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}

.box-dashed {
  border: 4px dashed #b45309; /* 破線 */
  padding: 16px;
  text-align: center;
}

<div class="box-double">二重線ボーダー</div>

.box-double {
  border-width: 8px;           /* 線の太さ */
  border-color: #e11d48;       /* 線の色 */
  border-style: double;        /* 二重線 */
  padding: 16px;
  text-align: center;
}

<div class="box-gradient">グラデーションボーダー</div>

.box-gradient {
  border-image: linear-gradient(45deg, #14b8a6, #8b5cf6, #ec4899) 1 / 6px;
  /* 45度方向に3色グラデーション。1はスライス値、6px はボーダー幅 */
  border-style: solid;
  padding: 16px;
  color: #0f172a;
  text-align: center;
}

<div class="box-image">button</div>

.box-image {
  /* 好きな装飾画像を用意し、そのURLとスライス値を指定 */
  border-image: url("https://picsum.photos/200/300.webp") 30 / 15px round;  
  /* 画像の端から30px分を9分割し、ボーダー幅15pxで表示 */
  border-width: 15px;
  padding: 16px;
  text-align: center;
}

<div class="box-outline">button</div>

.box-outline {
  border: 5px solid #facc15;      /* 外側のボーダー */
  outline: 5px solid #2563eb;     /* 外側に青線を追加 */
  outline-offset: -12px;          /* マイナス値でボーダー内側に寄せる */
  padding: 20px;
  position: relative;
  text-align: center;
}

<div class="box-pseudo">疑似要素ボーダー</div>

.box-pseudo {
  position: relative;
  border: 6px solid #dc2626; /* 外側の赤枠 */
  padding: 16px;
  margin: 16px;
 text-align: center;
}
.box-pseudo::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 6px solid #16a34a; /* 内側の緑枠 */
  pointer-events: none;
}

<div class="box-shadow-border">シャドウボーダー</div>

.box-shadow-border {
  padding: 16px;
  /* シャドウを二つ重ねて二重枠を作成 */
  box-shadow:
    0 0 0 5px #eab308,
    0 0 0 10px #f97316;
　text-align: center;
}

<div class="border-corner"><span >コーナーだけのボーダー</span></div>

.border-corner {
  position: relative;
  padding: 16px;
　text-align: center;
}

.border-corner::before,
.border-corner::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #333;
}

.border-corner::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.border-corner::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

<div class="border-glow-dashed"><span >破線＋ぼかしボーダー</span></div>

.border-glow-dashed {
  border: 3px dashed #0ff;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
  border-radius: 10px;
  padding: 16px; 
  text-align: center;
}