Border, Border-radius, & Box-shadow
Membuat garis tepi, sudut membulat, lingkaran, dan bayangan untuk memberi kesan kedalaman pada kartu dan tombol.
Border
Border membutuhkan tiga hal: lebar, gaya, dan warna. Gaya wajib ada; tanpa gaya border tidak muncul.
.kotak {
border: 2px solid #3c5a44; /* singkatan: lebar gaya warna */
}| Gaya | Tampilan |
|---|---|
solid | Garis lurus |
dashed | Garis putus-putus panjang |
dotted | Titik-titik |
double | Garis ganda |
none | Tanpa garis |
Untuk satu sisi saja: border-bottom, border-left, dan seterusnya. Contohnya garis bawah judul: h2 { border-bottom: 3px solid gold; }.
border-radius: sudut membulat
.kartu { border-radius: 12px; } /* sudut lembut */
.tombol { border-radius: 999px; } /* ujung seperti kapsul */
.avatar { width: 80px; height: 80px; border-radius: 50%; } /* lingkaran */Kunci membuat lingkaran: elemen persegi (lebar = tinggi) lalu border-radius: 50%.
box-shadow: bayangan kotak
.kartu {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* x y blur warna */
}| Nilai | Arti |
|---|---|
| Offset X | Geser ke kanan (+) atau kiri (−) |
| Offset Y | Geser ke bawah (+) atau atas (−) |
| Blur | Seberapa kabur |
| Spread (opsional) | Memperbesar/mengecilkan bayangan |
| Warna | Biasanya hitam transparan |
inset (opsional) | Bayangan di dalam kotak |
Bayangan halus dan transparan (rendah opasitas) terlihat profesional. Bayangan hitam pekat terlihat kasar. Kamu juga bisa menumpuk beberapa bayangan dengan pemisah koma.
text-shadow
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }outline
outline mirip border tetapi tidak memakan ruang dan tidak mengubah ukuran elemen. Sering dipakai untuk indikator fokus: outline: 3px solid #4d90fe; outline-offset: 2px;.