toolsmoah

Generator Border Radius

Buat dan pratinjau properti CSS border-radius secara visual.

CSS yang Dihasilkan
Sesuaikan kebulatan setiap sudut
Pratinjau
Pratinjau efek border-radius yang dihasilkan
Pratinjau
CSS yang Dihasilkan
border-radius: 20px;
Contoh
Klik pada gaya border-radius yang telah ditentukan untuk menerapkannya
Properti Border Radius

Urutan Properti

Properti border-radius berlaku dalam urutan searah jarum jam: kiri-atas → kanan-atas → kanan-bawah → kiri-bawah

Properti Singkatan

  • • border-radius: 10px; - Berlaku untuk keempat sudut
  • • border-radius: 10px 20px; - Pertama berlaku untuk kiri-atas dan kanan-bawah, kedua untuk kanan-atas dan kiri-bawah
  • • border-radius: 10px 20px 30px; - Pertama berlaku untuk kiri-atas, kedua untuk kanan-atas dan kiri-bawah, ketiga untuk kanan-bawah
  • • border-radius: 10px 20px 30px 40px; - Berlaku untuk kiri-atas, kanan-atas, kanan-bawah, dan kiri-bawah secara berurutan

Kiat Penggunaan

  • • Gunakan 50% untuk membuat lingkaran sempurna
  • • 4-8px biasanya bagus untuk tombol
  • • 8-16px umum untuk kartu dan panel
  • • Radius asimetris dapat menciptakan efek desain yang unik
    Generator Border Radius | toolsmoah