Cipta border-radius CSS secara visual dengan pratonton langsung dan salin kod sedia pengeluaran.

Pratonton Seret pemegang sudut
CSS
border-radius: ;

100% peribadi — semuanya berjalan dalam pelayar anda. Tiada apa-apa dimuat naik.

Semua sudut
px
px
Elemen
Pratetap

Mengenai Penjana Jejari Sempadan CSS

CSS Border Radius Generator mencipta segala-galanya daripada kad bulat lembut hingga bentuk blob organik. Seret pemegang penjuru terus pada pratonton, atau tetapkan setiap penjuru secara berangka — termasuk sintaks lapan nilai penuh, di mana setiap penjuru mempunyai jejari mendatar dan menegak berasingan. Paksi kedua itulah yang membuka kunci bentuk telur, daun, air mata dan blob.

Suis pautan penjuru mengekalkan keempat-empat penjuru selari untuk pembulatan seragam klasik, manakala menyahpautkannya membebaskan setiap penjuru untuk bentuk tidak simetri. Dua belas pratetap — rounded, pill, circle, squircle, dua blob, leaf, egg, arch, teardrop, petal dan wave — menunjukkan apa yang boleh dilakukan oleh sifat ini, dan butang rawak menjana bentuk organik segar tanpa henti.

Anda boleh menukar unit, mewarnakan semula elemen dan kanvas agar sepadan dengan reka bentuk anda, dan menyalin sama ada nilai border-radius semata-mata atau peraturan CSS penuh. Alat ini 100% berasaskan pelanggan — tiada apa dimuat naik.

Cara menggunakan Penjana Jejari Sempadan CSS

  1. Seret pemegang penjuru pada pratonton, atau matikan "Link all corners" untuk menyunting setiap penjuru secara berasingan.
  2. Tetapkan jejari mendatar dan menegak bagi setiap penjuru untuk bentuk organik seperti blob.
  3. Pilih unit anda dan laraskan warna elemen serta latar belakang untuk pratonton dalam konteks.
  4. Cuba pratetap — pill, squircle, blob, leaf, teardrop dan lain-lain — atau tekan rawak.
  5. Salin nilai border-radius atau CSS lengkap.

Soalan lazim

Nilai sebelum garis miring ialah jejari mendatar bagi keempat-empat penjuru; nilai selepasnya ialah jejari menegak. Membuatkan kedua-dua paksi berbeza pada setiap penjuru itulah yang menukar kotak bulat biasa menjadi telur, daun atau blob.

Untuk bulatan, gunakan elemen segi empat sama dengan border-radius: 50%. Untuk pil, berikan mana-mana segi empat tepat jejari sekurang-kurangnya separuh tingginya — pratetap circle dan pill menetapkan kedua-duanya serta-merta.

Ya — border-radius memotong kotak elemen, termasuk imej latar belakang, dan overflow: hidden melanjutkan potongan itu kepada kandungan anak. Menggunakan jejari blob pada elemen img adalah cara pantas untuk mendapatkan topeng foto organik.

Ya, border-radius mengekstrapolasi dengan lancar dengan peralihan CSS apabila kedua-dua keadaan mempunyai unit yang serasi. Menganimasikan antara dua nilai blob semasa hover adalah kesan pengubahan bentuk organik yang popular — jana kedua-dua keadaan di sini dan buat peralihan antaranya.

Ya, sepenuhnya percuma dan peribadi: ia hanya berjalan di pelayar anda, tanpa akaun dan tanpa data dihantar ke mana-mana.


Carian popular
penjana css border radius penjana border radius penjana border radius bergaya penjana sudut bulat css alat dalam talian border radius css penjana border radius elips penjana bentuk blob css alat pratonton border radius
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.