Handytool
PengembangGratisBerjalan secara lokal

Generator CSS border-radius

Desain CSS border-radius secara visual — seragam, per-sudut, dan elips — dengan pratinjau langsung.

Pratinjau
CSS
border-radius: 16px;
Mode
Unit

Mode per-sudut mengontrol setiap sudut secara individual; elips memisahkan radius horizontal dan vertikal.

Tentang Generator CSS border-radius

Generator border-radius Handytool memungkinkan Anda membentuk sudut elemen dengan slider bukan dugaan. Gunakan mode seragam untuk kotak bulat sederhana, mode per-sudut untuk membangun bentuk pil asimetris, atau mode elips untuk membagi radius horizontal dan vertikal untuk bentuk blob organik. Pratinjau diperbarui langsung dan deklarasi CSS hanya sejauh klik.

Fitur Generator CSS border-radius

  • 01

    Mode seragam dan per-sudut

    Mode seragam menerapkan satu radius ke setiap sudut. Mode per-sudut mengontrol atas-kiri, atas-kanan, bawah-kanan, dan bawah-kiri secara independen — pil, daun, dan bentuk tag asimetris hanya beberapa klik.

  • 02

    Sudut elips (X/Y)

    Beralih mode elips untuk menentukan radius horizontal dan vertikal per sudut — sintaks yang didukung CSS untuk bentuk blob organik.

  • 03

    Tiga unit

    Beralih antara px, %, dan rem. Nilai persentase membuat elips sejati yang menskalakan dengan kotak; nilai rem melacak ukuran font root untuk aksesibilitas.

FAQ Generator CSS border-radius

Apa perbedaan antara px dan %?
Radius pixel adalah absolut — sudut 16px selalu 16px. Radius persentase relatif terhadap lebar dan tinggi elemen, jadi 50% membuat lingkaran sempurna pada kotak persegi dan elips pada persegi panjang.
Kapan saya harus menggunakan mode elips?
Gunakan mode elips ketika Anda menginginkan sudut yang menonjol lebih pada satu sumbu — misalnya pil horizontal (50%/100%) atau bentuk blob seperti daun. CSS menyatakan ini sebagai `top-left-x top-right-x ... / top-left-y top-right-y ...`.
Mengapa radius persentase saya terlihat salah pada kotak non-persegi?
Persentase pada border-radius relatif terhadap sisi yang sesuai: persentase horizontal terhadap lebar, vertikal terhadap tinggi. Pada kotak lebar dan pendek itu berarti sudut membentang menjadi elips, bukan busur sempurna.
Apakah output bekerja di setiap browser?
Ya — border-radius dan sintaks elips didukung di setiap browser modern termasuk semua versi evergreen Safari, Firefox, Edge dan Chrome.

Alat terkait

Pengembang →

Jelajahi alat lain

Semua alat →