Tutorial CSS / Border, Sudut Membulat, dan Bayangan CSS

Border CSS menentukan tepi terlihat kotak, border-radius membulatkan sudutnya, dan box-shadow menambahkan bayangan tanpa menambah ukuran tata letak. Bayangan masih bisa terpotong oleh pengaturan overflow induk, dan border yang membulat tidak otomatis memotong setiap anak.

Atur lebar border, gaya, dan warna

.card { border: 2px solid #3d6b89; }

Singkatan border menggabungkan lebar, gaya, dan warna. solid menggambar garis utuh yang tidak terputus, dashed menggambar garis putus-putus, dan dotted menggambar titik-titik. Gaya none meniadakan border yang seharusnya muncul meskipun lebar dan warna telah ditentukan. Gunakan border-bottom atau border-block-end ketika hanya salah satu sisi yang memerlukan border. Untuk detail lebih lanjut, lihat Model Kotak CSS: Konten, Padding, Border, dan Margin.

Dengan lebar border-box yang tetap, menambah ketebalan border mengurangi ruang di dalamnya sambil mempertahankan lebar luar. Border dekoratif atau bayangan memiliki peran yang berbeda dari garis tepi fokus yang menandai target keyboard saat ini. Tetap jaga indikator tersebut terlihat. Lihat MDN: border.

Bandingkan panjang sudut dan persentasenya

.round { border-radius: 12px; }

.circle { width: 80px; height: 80px; border-radius: 50%; }

.oval { width: 160px; height: 80px; border-radius: 50%; }

Sebuah nilai panjang seperti 12px menentukan jari-jari sudut. Anda bisa memberikan nilai yang berbeda untuk keempat sudut, tetapi bandingkan mereka dengan satu nilai terlebih dahulu. Jika Anda menerapkan 50% pada kotak dengan lebar dan tinggi yang sama, itu akan terlihat seperti lingkaran, dan jika ukuran horizontal dan vertikal berbeda, itu akan terlihat seperti elips. Jari-jari horizontal dari persentase didasarkan pada lebar, dan jari-jari vertikal didasarkan pada tinggi.

Sudut membulat dari elemen induk tidak secara otomatis memotong gambar anak. Pilih antara memberikan border-radius pada gambar itu sendiri atau memotong overflow dari elemen induk, tergantung pada tujuan Anda. Jika Anda menambahkan hidden pada elemen induk, tampilan bayangan/fokus dari anak juga bisa terpotong di tepi. Perbandingan berikut membedakan kotak mana yang sedang dipotong. Anda dapat memeriksa perhitungan radius dalam deskripsi border-radius MDN.

Baca nilai bayangan

.shadow { box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }

Dua panjang pertama diperlukan dan blur serta spread dapat diabaikan. Radius blur tidak boleh negatif. Menambahkan inset adalah bayangan dalam, default adalah bayangan luar. Ada juga cara untuk menambahkan beberapa bayangan, tetapi pertama-tama periksa dengan mengubah gerakan dan ukuran satu bayangan secara terpisah.

Bayangan tidak menambah alokasi ruang dalam tata letak. Bayangan tidak akan mendorong kartu berikutnya sesuai dengan jumlah blur atau spread-nya. Bayangan besar dapat menutupi konten di sekitarnya, jadi berikan jarak nyata dengan margin atau celah tata letak jika diperlukan. Lihat MDN: box shadow.

Temukan leluhur yang memotong bayangan

.frame { padding: 12px; overflow: visible; }

.frame.clip { overflow: hidden; }

.frame .card { box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }

Dua kartu terakhir memiliki induk .frame yang terpisah. Bayangan anaknya identik, tetapi satu induk mengizinkan overflow terlihat dan yang lain memotongnya. Bayangan melewati padding induk 12px, jadi versi dengan overflow tersembunyi memotongnya di batas induk. Periksa leluhur itu saat mendiagnosis bayangan yang terpotong. Lihat Overflow CSS, Pembungkusan Teks Panjang, dan Elipsis.

Jangan bingung antara mengatur overflow: hidden pada kartu itu sendiri dengan membuat elemen induk memotong bayangan anaknya. Latihan ini adalah situasi di mana induk memotong bayangan luar kartu anak. Jika bayangan tidak terlihat di halaman sebenarnya, Anda harus memeriksa tidak hanya nilai kartu itu sendiri, tetapi juga overflow dan border dari elemen induk.

Jalankan contohnya dan bandingkan perubahan

Simpan kode di bawah ini sebagai UTF-8 di borders.html. Perbandingan batas, sudut membulat, bayangan luar, bayangan dalam, lingkaran dan elips, serta pemotongan semuanya termasuk.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing borders, corners, and shadows</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 16px/1.6 sans-serif; background: #f6f8fa; }
    .card { width: 100%; max-width: 320px; margin-block: 24px; padding: 20px; background: white; }
    .border { border: 2px solid #3d6b89; }
    .round { border: 2px solid #3d6b89; border-radius: 12px; }
    .shadow { border-radius: 12px; box-shadow: 0 8px 24px 4px rgb(0 0 0 / 16%); }
    .inset { box-shadow: inset 0 0 12px 2px rgb(0 0 0 / 20%); }
    .shape { width: 80px; height: 80px; margin-block: 16px; border-radius: 50%; background: #6eb898; }
    .oval { width: 160px; }
    .frame { width: 100%; max-width: 320px; padding: 12px; margin-block: 24px; background: #dce8f1; overflow: visible; }
    .frame .card { margin: 0; max-width: none; height: 100px; box-shadow: 0 18px 20px 8px rgb(0 0 0 / 25%); }
    .clip { overflow: hidden; }
  </style>
</head>
<body>
  <h1>Card boundaries and shadows</h1>
  <div class="card border">Card with a border only</div>
  <div class="card round">Border and rounded corners</div>
  <div class="card shadow">Outer shadow</div>
  <div class="card inset">Inset shadow</div>
  <h2>50% Edges: Circles and Ovals</h2><div class="shape" role="img" aria-label="80×80 circle"></div><div class="shape oval" role="img" aria-label="160×80 ellipse"></div>
  <h2>Parent: overflow: visible</h2><div class="frame"><div class="card">Child shadow visible outside the parent</div></div>
  <h2>Parent: overflow: hidden</h2><div class="frame clip"><div class="card">Child shadow clipped at the parent boundary</div></div>
</body>
</html>

1. Ubah ketebalan .border dari 2px menjadi 8px. Pada jendela lebar, pastikan lebar luar tetap terjaga dan ruang dalam dikurangi, lalu kembalikan ke 2px.
2. Ubah lebar .shape dari 80px menjadi 160px. Pastikan lingkaran menjadi elips jika tinggi tetap 80px. Kembalikan ke lebar semula.
3. Ubah pergeseran horizontal dari .shadow menjadi 20px dan pergeseran vertikal menjadi -8px. Pertahankan blur 24px dan bandingkan hanya arah pergerakannya. Selanjutnya, ubah blur menjadi 0, bandingkan dengan tepi tajam, dan kemudian kembalikan ke nilai aslinya.
4. Ubah spread 4px menjadi -4px. Perhatikan apakah ukuran bayangan berkurang. Ubah hidden menjadi visible pada .frame kedua. Periksa apakah bayangan di luar induk terlihat kembali, lalu kembalikan ke hidden.

Jika bayangan terlihat buram, periksa opasitas warna dan kontras latar belakang, dan jika hanya satu sisi yang terpotong, periksa border dan overflow dari elemen induk. Jika konten anak di dalam sudut menonjol, kita juga membandingkan metode pemberian sudut membulat pada anak itu sendiri. Utamakan efek yang menjaga konten tetap jelas dan kontrol mudah digunakan.