Lompat ke konten
SPCX Tools

Border Radius

Desain sudut melengkung dan bentuk CSS secara visual, lalu salin kode dengan satu klik.

Berjalan secara lokal — file tidak pernah meninggalkan perangkat Anda

Memuat alat…

Cara menggunakan Border Radius

  1. 1Pilih unit yang diinginkan ("px" untuk lengkungan tetap atau "%" untuk bentuk responsif).
  2. 2Gunakan centang "Tautkan sudut" untuk mengatur semua sudut sekaligus, atau hapus centang untuk mengatur nilai setiap sudut secara terpisah.
  3. 3Geser slider untuk mengatur border radius dan lihat perubahan bentuk pada pratinjau secara real-time.
  4. 4Atau, klik salah satu tombol preset untuk langsung membuat bentuk umum seperti pil, lingkaran, tab, atau daun.
  5. 5Salin kode CSS yang dihasilkan di bagian bawah untuk digunakan pada stylesheet Anda.

Generator border radius visual

Membuat sudut membulat yang sempurna untuk komponen web seharusnya tidak perlu menebak angka dan terus-menerus me-refresh browser. Generator border radius visual ini memungkinkan Anda menggeser slider dan langsung melihat efek lengkungannya pada elemen. Setelah mendapatkan tampilan yang pas, Anda bisa langsung menyalin snippet CSS yang optimal ke clipboard.

Karena semua perhitungan dan pratinjau diproses secara lokal di browser Anda, tool ini sangat cepat dan sepenuhnya privat. Tidak ada desain atau klik yang diunggah ke server.

Menguasai rounded corners CSS

Properti border-radius adalah bagian fundamental dari desain web modern, digunakan untuk memperhalus sudut tajam pada tombol, gambar, modal, dan container layout. Meski terlihat sederhana, sintaksnya bisa cukup rumit jika Anda ingin mengatur sudut-sudut tertentu.

Generator CSS border-radius ini membantu Anda memahami dan menggunakan sintaks shorthand CSS dengan efektif. Saat Anda menautkan semua sudut, tool ini akan menghasilkan satu nilai (misalnya, border-radius: 16px;). Jika Anda memisahkan sudut untuk membuat bentuk custom, generator otomatis memformat CSS berdasarkan input Anda:

  • Empat nilai: Jika semua sudut berbeda, CSS menerapkannya searah jarum jam mulai dari kiri-atas (misalnya, border-radius: 16px 8px 4px 2px;).
  • Dua nilai: Jika kiri-atas sama dengan kanan-bawah, dan kanan-atas sama dengan kiri-bawah, tool ini akan meringkas kode menjadi dua nilai (misalnya, border-radius: 16px 0;).

Piksel vs. Persentase

Salah satu dilema paling umum saat membuat CSS sudut melengkung adalah memilih satuan yang tepat. Alat ini memudahkan Anda beralih antara piksel (px) dan persentase (%), yang masing-masing memiliki fungsi berbeda dalam desain UI.

Piksel (px) adalah satuan absolut. Border radius 12px akan selalu terlihat sama persis, baik saat diterapkan pada tombol kecil maupun gambar hero berukuran besar. Piksel adalah pilihan standar untuk komponen UI seperti card, menu dropdown, dan kolom input karena dapat menjaga konsistensi bahasa desain di seluruh aplikasi Anda. Alat ini mendukung nilai piksel hingga 200px.

Persentase (%) bersifat relatif terhadap ukuran elemen itu sendiri. Border radius 50% pada elemen persegi akan selalu membentuk lingkaran sempurna, tidak peduli apakah persegi tersebut memiliki lebar 50 piksel atau 500 piksel. Jika elemennya berbentuk persegi panjang, 50% akan membentuk oval elips. Persentase sangat ideal untuk elemen responsif seperti avatar profil atau bentuk blob dekoratif pada background. Alat ini membatasi nilai persentase maksimal di 50%, karena nilai lebih dari itu tidak akan menambah efek lengkungan visual pada CSS.

Lebih dari sekadar sudut biasa: Generator bentuk CSS

Meskipun umumnya dipakai untuk melengkungkan sudut, border-radius juga merupakan generator bentuk css yang andal. Dengan mengatur setiap sudut secara terpisah dan memadukan nilai yang ekstrem, Anda bisa membuat bentuk geometris unik tanpa perlu file SVG atau clip-path yang rumit. Alat ini menyediakan beberapa preset untuk menunjukkannya:

  • Pil: Dengan menerapkan nilai piksel yang sangat tinggi (seperti 9999px) pada semua sudut, Anda membuat bentuk "pil" atau stadion. Bentuk ini banyak digunakan untuk badge, label, dan tombol call-to-action modern. Browser membatasi lengkungan aslinya tepat setengah dari tinggi elemen, sehingga menghasilkan bentuk setengah lingkaran sempurna di bagian tepi.
  • Lingkaran: Mengatur semua sudut ke 50% akan mengubah persegi menjadi lingkaran sempurna.
  • Daun: Dengan mengatur sudut kiri atas dan kanan bawah ke 0, serta sudut kanan atas dan kiri bawah ke nilai yang tinggi (seperti 48px), Anda membuat bentuk daun organik yang asimetris.
  • Tab: Dengan hanya melengkungkan sudut kiri atas dan kanan atas (misalnya, 16px) dan membiarkan sudut bawah tetap 0, Anda membuat bentuk tab folder klasik yang sangat cocok untuk menu navigasi.

Menyempurnakan komponen UI Anda

Sudut membulat jarang berdiri sendiri; biasanya elemen ini merupakan bagian dari sistem desain yang lebih luas dan kohesif. Komponen kartu yang dirancang dengan baik, misalnya, memadukan border radius yang halus dengan kedalaman dan warna agar tampak menonjol di halaman.

Setelah menghasilkan border radius yang ideal, Anda dapat menggabungkannya dengan efek CSS lainnya untuk melengkapi desain Anda. Coba padukan bentuk baru ini dengan drop shadow yang lembut menggunakan Box Shadow Generator kami untuk menciptakan efek timbul dan melayang. Jika Anda sedang menata gaya tombol atau elemen latar belakang dekoratif, Anda bisa menerapkan latar belakang yang cerah menggunakan CSS Gradient Generator, atau menemukan warna solid komplementer yang pas dengan Color Palette Generator.

Pertanyaan yang sering diajukan

Apa itu properti CSS border-radius?
Properti CSS border-radius berfungsi melengkungkan sudut batas luar suatu elemen. Anda dapat mengatur satu radius untuk membuat lingkaran atau persegi panjang dengan sudut melengkung, atau menentukan radius yang berbeda pada setiap sudut untuk membuat bentuk yang lebih kompleks.
Apakah saya harus menggunakan piksel (px) atau persentase (%)?
Gunakan piksel (px) jika Anda menginginkan lengkungan yang tetap dan konsisten terlepas dari ukuran elemen, seperti kartu dengan sudut melengkung standar 8px. Gunakan persentase (%) jika Anda ingin lengkungan menyesuaikan ukuran elemen, seperti menggunakan 50% untuk membuat lingkaran sempurna atau oval.
Bagaimana cara membuat lingkaran sempurna di CSS?
Untuk membuat lingkaran sempurna, elemen HTML Anda harus memiliki lebar dan tinggi yang sama (persegi), dan border-radius harus diatur ke 50%. Anda dapat menggunakan preset "Circle" di alat ini untuk menghasilkan kode yang tepat.
Bagaimana cara membuat bentuk pil?
Bentuk pil dibuat dengan mengatur nilai piksel yang sangat tinggi untuk border radius, seperti 9999px. Hal ini memastikan tepi kiri dan kanan (atau atas dan bawah) menjadi setengah lingkaran yang melengkung sempurna, terlepas dari lebar elemen.
Mengapa kode CSS yang dihasilkan terkadang memiliki kurang dari empat nilai?
CSS menggunakan penulisan singkat (shorthand) untuk border-radius. Jika keempat sudutnya sama, hasilnya satu nilai (misalnya, 16px). Jika sudut kiri-atas/kanan-bawah sama dan kanan-atas/kiri-bawah sama, hasilnya dua nilai. Ini membuat kode CSS Anda tetap rapi dan ringkas.
Apakah data desain saya disimpan?
Tidak, generator border radius ini berjalan sepenuhnya di browser Anda. Tidak ada data yang dikirim atau disimpan di server mana pun, memastikan pengalaman yang cepat dan privat.

Alat terkait

Generator Box ShadowAtur bayangan lembut, tajam, berlapis, atau inset dengan pratinjau langsung dan salin CSS-nya.Generator Gradien CSSDesain background gradien secara visual dan salin kode CSS-nya — linear, radial, atau conic.Generator Palet WarnaPilih satu warna dan dapatkan palet lima warna yang harmonis berdasarkan teori warna.Simulator Buta WarnaLihat pratinjau gambar Anda dari sudut pandang penderita defisiensi penglihatan warna untuk memastikan desain Anda mudah diakses.Cek Kontras WarnaCek apakah teks Anda cukup mudah dibaca — dan dapatkan warna terdekat yang memenuhi standar WCAG.Konverter WarnaKonversi warna apa pun antara HEX, RGB, HSL, HSV, dan CMYK, serta cek kontrasnya.