Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Border Radius CSS

CSS Border Radius Generator

Bentuk keempat sudut border-radius secara terpisah atau tertaut, dalam piksel atau persen, lalu salin deklarasi empat nilai yang selalu eksplisit.

Jalur tugas / dari masukan ke hasil

Pilih satuan

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Border Radius CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membentuk border-radius CSS

  1. 01

    Pilih satuan

    Atur Satuan ke Piksel atau Persen — ruang kerja dimulai dalam Piksel. Piksel tetap konstan pada ukuran elemen berapa pun; nilai persen menyesuaikan dengan elemen, dan itulah yang memungkinkan bentuk organik yang asimetris.

  2. 02

    Sesuaikan keempat sudut

    Geser Kiri atas, Kanan atas, Kanan bawah, dan Kiri bawah — masing-masing dari 0 hingga 100 dalam satuan yang dipilih, dengan kelipatan 1. Keempatnya dimulai pada 24 px, dan kartu pratinjau digambar ulang pada setiap perubahan.

  3. 03

    Tautkan atau lepas tautan sudut

    Biarkan Tautkan semua sudut aktif untuk mengubah setiap sudut sekaligus, atau matikan untuk membentuk setiap sudut secara independen. Ruang kerja menyatakannya di samping tombol: saat tertaut, mengubah satu sudut memperbarui keempatnya.

  4. 04

    Coba bentuk contoh

    Tekan Muat contoh untuk referensi asimetris: Kiri atas dan Kanan bawah pada 64 px, Kanan atas dan Kiri bawah pada 12 px, tanpa tautan — bentuk daun diagonal yang dipakai pada kartu dan avatar. Atur ulang mengembalikan default seragam 24 px.

  5. 05

    Periksa deklarasi yang dihasilkan

    Hasilnya selalu mencantumkan empat nilai searah jarum jam — kiri atas, kanan atas, kanan bawah, kiri bawah — sehingga setiap sudut tetap eksplisit saat Anda menempelnya. Lencana statusnya berbunyi CSS VALID, dan sudut mana pun yang keluar rentang mengubahnya menjadi PERIKSA NILAI serta memblokir penyalinan.

  6. 06

    Salin atau unduh CSS

    Tekan Salin CSS untuk menyalin aturan .rounded-card sebagai deklarasi border-radius empat nilai, atau Unduh .css untuk menyimpannya sebagai toolars-border-radius.css. Deklarasi yang sama bekerja pada gambar, tombol, kartu, dan elemen lainnya.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Border Radius CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Border Radius CSS

Sudut membulat menentukan kesan sebuah antarmuka: 8 px untuk formulir yang tenang, 24 px untuk kartu yang ramah, nilai yang sangat asimetris untuk gumpalan organik di balik bagian hero. Menebak empat angka di stylesheet itu lambat, terutama dalam persen, karena lengkungnya bergantung pada proporsi elemen. Generator Border Radius CSS menunjukkan bentuk yang tepat saat Anda menarik, dengan sudut tertaut untuk pembulatan seragam atau terlepas untuk bentuk daun dan gumpalan. Setelah itu deklarasinya diserahkan kepada Anda — dirender dan divalidasi secara lokal.

Pertanyaan umum

Apa perbedaan antara Piksel dan Persen?
Piksel memberi setiap sudut radius tetap berapa pun ukuran elemennya. Persen dihitung terhadap dimensi elemen, sehingga nilai yang sama menghasilkan lengkung berbeda pada kartu tinggi dibanding kartu lebar — relativitas itulah yang memungkinkan bentuk elips dan gumpalan.
Apa fungsi Tautkan semua sudut?
Saat tertaut, mengubah sudut mana pun memperbarui keempatnya ke nilai yang sama, sehingga pembulatan seragam jadi cepat. Matikan tombolnya untuk mengontrol Kiri atas, Kanan atas, Kanan bawah, dan Kiri bawah secara independen — preset contoh yang asimetris dibangun dengan cara itu.
Bagaimana cara mendapatkan lingkaran atau elips sempurna?
Alihkan Satuan ke Persen dan atur keempat sudut ke 50: pada elemen persegi hasilnya lingkaran sempurna, dan pada elemen persegi panjang hasilnya elips. Itulah teknik standar untuk avatar dan pill, dan pratinjau menunjukkannya sebelum Anda menyalin apa pun.
Mengapa hasilnya selalu mencantumkan empat nilai?
CSS sebenarnya bisa meringkas nilai yang identik menjadi bentuk singkat, tetapi generator menulis keempat sudut searah jarum jam agar deklarasinya mencerminkan keempat kontrol dengan tepat. Apa yang Anda setel adalah apa yang Anda tempel, tanpa ambiguitas tentang sudut mana yang dibentuk oleh setiap angka.
Berapa batasannya?
Setiap sudut menerima 0 hingga 100 dalam satuan yang dipilih, dengan kelipatan 1. Nilai di luar rentang disorot dengan PERIKSA NILAI, dan penyalinan atau pengunduhan diblokir sampai diperbaiki.
Apakah ada yang diunggah atau disimpan?
Tidak. Pratinjau dan CSS yang dihasilkan dihitung di dalam tab peramban ini, dan tidak ada nilai yang dihasilkan masuk ke penyimpanan, log, analitik, atau jaringan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat