Question 1

Apa perbedaan antara nilai singkat dan nilai sudut individual di border-radius?

Accepted Answer

Singkatan border-radius: 10px mengatur semua empat sudut secara sama. Anda dapat menargetkan sudut individual dengan border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius. Singkatan juga menerima 1-4 nilai mengikuti pola atas/kanan/bawah/kiri yang sama dengan margin dan padding.

Question 2

Haruskah saya menggunakan piksel atau persentase untuk border-radius?

Accepted Answer

Gunakan persentase (mis. border-radius: 50%) ketika Anda ingin radius diskalakan secara proporsional dengan ukuran elemen — ini adalah teknik standar untuk membuat lingkaran sempurna atau bentuk pil. Gunakan piksel atau rem ketika Anda menginginkan kebulatan sudut tetap terlepas dari ukuran elemen, yang umum pada kartu, tombol, dan input.

Question 3

Apa sintaks garis miring untuk border-radius elips?

Accepted Answer

Sintaks garis miring (mis. border-radius: 40px / 20px) membuat sudut elips dengan menentukan jari-jari horizontal dan vertikal secara terpisah. Nilai sebelum garis miring mendefinisikan jari-jari horizontal untuk keempat sudut; nilai setelah mendefinisikan jari-jari vertikal. Ini memungkinkan efek sudut oval atau berbentuk telur yang tidak bisa dicapai dengan satu nilai jari-jari.

Question 4

Apakah border-radius berinteraksi dengan border dan outline?

Accepted Answer

Ya. border-radius memotong latar belakang dan border elemen. Jari-jari border dalam dihitung otomatis sebagai border-radius dikurangi border-width, artinya border yang sangat tebal dapat membuat sudut dalam tampak tajam meskipun sudut luar dibulatkan. outline tidak dipotong oleh border-radius — tetap berbentuk persegi panjang.

Question 5

Bagaimana cara membuat border-radius responsif?

Accepted Answer

Gunakan satuan relatif seperti em, rem, vw, atau % alih-alih nilai px tetap. Misalnya, border-radius: 1rem diskalakan dengan ukuran font root, dan border-radius: 2vw diskalakan dengan lebar viewport. Atau gunakan CSS clamp(): border-radius: clamp(4px, 1vw, 16px) untuk mengatur minimum, nilai yang diinginkan, dan maksimum.

Generator CSS Border Radius

Pertanyaan yang Sering Diajukan

Comments & Feedback