Border Radius Oluşturucu

Köşeleri görsel olarak yuvarlayın; organik blob şekilleri üreten eğik çizgi sözdizimi dahil.

Birim
Yatay yarıçaplar
tl60%
tr40%
br60%
bl40%

Bağlantıyı kaldırıp her köşeye farklı yatay ve dikey yarıçap verin. Blob şekillerini üreten şey o eğik çizgi sözdizimidir.

CSS
border-radius: 60% 40% 60% 40%;

Border Radius Nasıl Oluşturulur

1

Bir birim seçin

Yüzdeler ögeyle birlikte ölçeklenir; blob ve daireler için istediğiniz budur. Piksel sabit kalır ve kart, düğme ile giriş alanları için doğrudur.

2

Köşeleri şekillendirin

Her köşenin kendi kaydırıcısı var. Bağlantıyı kaldırdığınızda dikey yarıçaplar için ikinci bir set açılır; organik şekiller buradan doğar.

3

CSS'i kopyalayın

Önizleme anlık güncellenir ve çıktı kısayolu kullanır; iki eksen eşitse basit forma iner, böylece gereğinden uzun CSS yayınlamazsınız.

Özellikler

Dört köşenin bağımsız kontrolü
Blob şekilleri için ayrı yatay ve dikey yarıçaplar
Yüzde ve piksel birimleri
Gerçek bir öge üzerinde canlı önizleme
İki eksen eşitse sadeleşen kısayol çıktısı
Tek tıkla eşit yarıçapa sıfırlama
Tamamen tarayıcınızda çalışır, üyelik yok
Çıktıda filigran olmadan ücretsiz

Sık Sorulan Sorular

Yatay ve dikey yarıçapları ayırır. Eğik çizgiden önceki değerler her köşenin yatay, sonrakiler dikey yarıçapını belirler; dairesel yerine elips biçimli köşeyi böyle elde edersiniz.

Yüzde kullanın, bağlantıyı kaldırın ve yatay ile dikey setlere farklı değerler verin. 60% 40% 60% 40% üzerine 40% 60% 40% 60% gibi bir şey klasik organik blob'u üretir.

Arayüz ögeleri için piksel, çünkü öge yeniden boyutlanınca köşe değişmemeli. Dekoratif şekiller için yüzde, çünkü kutuyla ölçeklenip oranı korurlar.

Kare bir ögede her köşeyi yüzde 50 yapın. Öge kare değilse elips elde edersiniz ki avatar için çoğu zaman aslında istediğiniz de budur.

Komşu köşeler çakışacaksa tarayıcılar yarıçapları orantılı olarak küçültür. Aynı kenardaki iki köşe toplamı kenar uzunluğunu aşarsa ikisi de sığacak şekilde azaltılır.

Arka plan ve kenarlık eğriyi izler, ancak overflow hidden eklemedikçe alt içerik izlemez. Yuvarlatılmış bir karttan görselin taşmasının olağan sebebi budur.

Hayır. Her şey tarayıcınızda çalışır ve hiçbir şey sunucuya gönderilmez.

Evet, tamamen ücretsiz ve üyeliksiz.

Özel Bir Araç veya Uygulamaya mı İhtiyacınız Var?

Üretim kalitesinde web uygulamaları, SaaS platformları ve geliştirici araçları oluşturuyoruz. Projeniz hakkında konuşalım.

veya ücretsiz görüşme ayarlayın