Border CSS: Width, Style, Color, dan Border Radius

Shorthand border

border menggambar garis di sekeliling elemen, di antara padding dan margin-nya. Shorthand ini menerima tiga bagian dalam urutan apa pun: lebar, gaya, dan warna.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Gaya adalah bagian yang tidak bisa dilewatkan. Default-nya none, jadi border: 2px #2563eb; sama sekali tidak menggambar apa-apa. Jika kamu tidak menulis warnanya, border memakai warna teks elemen.

Gaya border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double butuh minimal 3px untuk menampilkan dua garis. groove, ridge, inset, dan outset memberi bayangan pada warna agar terlihat 3D dan tampilannya sedikit berbeda di tiap browser. hidden terlihat seperti none; keduanya hanya berbeda di dalam tabel dengan border yang di-collapse, yang dibahas di halaman border tabel HTML.

Satu sisi saja

Setiap sisi punya shorthand sendiri (border-top, border-right, border-bottom, border-left), dan setiap bagian punya longhand per sisi seperti border-top-color. Versi logisnya, border-inline-start dan border-block-end, mengikuti arah teks:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width, dan border-style menerima satu sampai empat nilai dengan urutan searah jarum jam seperti padding: atas, kanan, bawah, kiri.

Sudut membulat dengan border-radius

border-radius membulatkan sudut border dan background, jadi properti ini juga berfungsi pada elemen yang sama sekali tidak punya border.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Anak elemen yang punya background bisa menyembul keluar dari sudut induk yang membulat. overflow: hidden pada induk memotongnya mengikuti lengkungan.

Border vs outline

Outline terlihat seperti border tetapi digambar di luarnya dan tidak memakan ruang, jadi menambahkannya tidak pernah menggeser apa pun. Karena itulah browser memakai outline untuk focus ring.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

Kesalahan umum

• Tidak ada gaya border. border: 1px #111827; dan border-color: red; tidak menggambar apa-apa. Sertakan solid (atau gaya lain).
• Border yang membuat tata letak melompat saat hover. Sediakan ruangnya dengan border transparan, atau pakai outline atau box-shadow.
• Lupa memperhitungkan border dalam lebar. Elemen width: 100% dengan border akan melebihi wadahnya jika memakai content-box. Pakai box-sizing: border-box.
• border-radius dengan anak elemen yang menyembul dari sudut. Tambahkan overflow: hidden pada induk yang membulat.
• Menghapus outline fokus dengan outline: none. Pengguna keyboard membutuhkannya; ubah gaya outline-nya alih-alih menghapusnya.