Baricode LMS - Border & Outline

Border & Outline 🖼️

Border adalah garis tepi yang mengelilingi elemen, berada di antara padding dan margin. Outline mirip dengan border, tapi memiliki perbedaan penting yang perlu dipahami.

Border Dasar

Border memiliki tiga property utama yang wajib didefinisikan:

.kotak {
  border-width: 2px;       /* ketebalan garis */
  border-style: solid;     /* gaya garis */
  border-color: #374151;   /* warna garis */
}

/* Shorthand — lebih umum digunakan */
.kotak {
  border: 2px solid #374151;
}

border-style — Gaya Garis

.solid  { border: 2px solid black; }   /* ─────── */
.dashed { border: 2px dashed black; }  /* ─ ─ ─ ─ */
.dotted { border: 2px dotted black; }  /* · · · · */
.double { border: 4px double black; }  /* ═══════ */
.groove { border: 4px groove gray; }   /* terlihat cekung */
.ridge  { border: 4px ridge gray; }    /* terlihat timbul */
.none   { border: none; }              /* hapus border */

Border Per Sisi

Bisa mengatur border di sisi tertentu saja:

.bawah-saja {
  border-bottom: 2px solid #e5e7eb;
}

.kiri-saja {
  border-left: 4px solid #3b82f6;
}

/* Tiap sisi berbeda */
.semua-beda {
  border-top: 2px solid blue;
  border-right: 2px dashed green;
  border-bottom: 3px solid red;
  border-left: 2px dotted orange;
}

border-radius — Sudut Melengkung

Property yang sangat sering dipakai untuk membuat sudut elemen melengkung:

/* Semua sudut sama */
.sedikit-bulat  { border-radius: 4px; }
.cukup-bulat    { border-radius: 8px; }
.sangat-bulat   { border-radius: 16px; }
.pill           { border-radius: 999px; } /* kapsul/pill */
.lingkaran      { border-radius: 50%; }  /* lingkaran penuh */

/* Tiap sudut berbeda */
.sudut-beda {
  /* atas-kiri | atas-kanan | bawah-kanan | bawah-kiri */
  border-radius: 4px 16px 4px 16px;
}

/* Hanya sudut tertentu */
.hanya-atas {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

Contoh Penggunaan Nyata

/* Tombol */
.tombol {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Kartu */
.kartu {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

/* Input teks */
input {
  border: 2px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  outline: none;
}

input:focus {
  border-color: #3b82f6; /* ganti warna border saat aktif */
}

/* Avatar bulat */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

Outline — Mirip Border tapi Berbeda

Outline tampak mirip border, tapi memiliki perbedaan krusial:

.elemen {
  outline: 2px solid blue;
  outline-offset: 4px; /* jarak outline dari border */
}

Aspek	Border	Outline
Mengambil ruang	Ya (mempengaruhi ukuran/layout)	Tidak
Bisa per sisi	Ya	Tidak
Posisi	Di antara padding dan margin	Di luar border
Umum dipakai untuk	Dekorasi, kartu, tombol	Focus indicator

Outline sering dipakai oleh browser sebagai indikator fokus (aksesibilitas) saat elemen navigasi dengan keyboard:

/* Jangan menghapus outline tanpa gantinya! */
button:focus {
  outline: none;
  /* Ganti dengan styling kustom agar tetap aksesibel */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

💡 Tips: border-radius: 50% hanya menghasilkan lingkaran sempurna jika elemen memiliki width dan height yang sama. Untuk membuat foto profil bulat, pastikan elemennya berbentuk kotak terlebih dahulu. 🖼️

Border & Outline