CSS border-radius'u canlı önizlemeyle görsel olarak tasarlayın ve üretime hazır kodu kopyalayın.

Önizleme Köşe tutamaçlarını sürükleyin
CSS
border-radius: ;

%100 gizli — her şey tarayıcınızda çalışır. Hiçbir şey yüklenmez.

Tüm köşeler
px
px
Öğe
Hazır ayarlar

CSS Köşe Yarıçapı Oluşturucu Hakkında

CSS Border Radius Generator, yumuşak yuvarlatılmış kartlardan organik blob şekillerine kadar her şeyi hazırlar. Köşe tutamaçlarını doğrudan önizleme üzerinde sürükleyin veya her köşeyi sayısal olarak ayarlayın — her köşenin ayrı yatay ve dikey yarıçaplara sahip olduğu tam sekiz değerli sözdizimi dahil. İşte bu ikinci eksen yumurta, yaprak, gözyaşı damlası ve blob şekillerinin kilidini açar.

Bir köşe-bağlama anahtarı, klasik tek tip yuvarlatma için tüm dört köşeyi senkronize tutarken, bağlantıyı kaldırmak her köşeyi asimetrik şekiller için serbest bırakır. On iki hazır ayar — rounded, pill, circle, squircle, iki blob, leaf, egg, arch, teardrop, petal ve wave — özelliğin neler yapabileceğini gösterir; bir rastgeleleştirme düğmesi ise sonsuz taze organik şekiller üretir.

Birimi değiştirebilir, tasarımınıza uyacak şekilde öğeyi ve tuvali yeniden renklendirebilir, sade border-radius değerini veya tam bir CSS kuralını kopyalayabilirsiniz. Araç %100 istemci taraflıdır — hiçbir şey yüklenmez.

CSS Köşe Yarıçapı Oluşturucu Nasıl Kullanılır

  1. Önizlemedeki köşe tutamaçlarını sürükleyin veya her köşeyi ayrı ayrı düzenlemek için "Tüm köşeleri bağla"yı kapatın.
  2. Organik, blob benzeri şekiller için her köşe için yatay ve dikey yarıçapı ayarlayın.
  3. Biriminizi seçin ve bağlamda önizlemek için öğe ve arka plan renklerini ayarlayın.
  4. Hazır ayarları deneyin — pill, squircle, blob, leaf, teardrop ve daha fazlası — veya rastgeleleştirmeye basın.
  5. border-radius değerini veya tam CSS'i kopyalayın.

Sıkça sorulan sorular

Eğik çizgiden önceki değerler dört köşenin yatay yarıçaplarıdır; sonrakiler ise dikey yarıçaplardır. Her köşede iki eksenin farklılaşmasını sağlamak, düz yuvarlatılmış bir kutuyu yumurta, yaprak veya blob şekline dönüştüren şeydir.

Bir daire için border-radius: 50% olan kare bir öğe kullanın. Hap için, herhangi bir dikdörtgene yüksekliğinin en az yarısı kadar bir yarıçap verin — daire ve hap hazır ayarları her ikisini de anında kurar.

Evet — border-radius, arka plan görüntüleri dahil öğenin kutusunu kırpar ve overflow: hidden kırpmayı alt içeriğe kadar genişletir. Bir img öğesine blob yarıçapı uygulamak, organik fotoğraf maskeleri elde etmenin hızlı bir yoludur.

Evet, her iki durum da uyumlu birimlere sahip olduğunda border-radius, CSS geçişleriyle sorunsuzca enterpole olur. Hover üzerinde iki blob değeri arasında animasyon yapmak popüler bir organik dönüşüm efektidir — her iki durumu burada oluşturun ve aralarında geçiş yapın.

Evet, tamamen ücretsiz ve gizli: yalnızca tarayıcınızda çalışır, hesap gerektirmez ve hiçbir veri hiçbir yere gönderilmez.


Popüler aramalar
css köşe yarıçapı oluşturucu köşe yarıçapı oluşturucu şık köşe yarıçapı oluşturucu css yuvarlatılmış köşe oluşturucu border radius css çevrimiçi araç eliptik köşe yarıçapı oluşturucu css damla şekli oluşturucu köşe yarıçapı önizleme aracı
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.