CSS Yuvarlak Köşe (border-radius) Üretici

Nasıl çalışır?

Sol panele bir kutu rengi yazın — renk yalnızca önizlemede kullanılır, çünkü border-radius özelliği renk taşımaz. Sonra dört köşe kaydırıcısını ayarlayın: yuvarlak köşe modunda değerler pikseldir ve araç kodu CSS kısaltmasıyla yazar — dört köşe de 16 ise çıktı yalnızca border-radius: 16px olur, çapraz köşeler eşitse iki değere iner. Kart ve düğme köşeleri için 8-24 piksel arası yaygın başlangıçtır; 16 piksellik varsayılan çoğu kart için doğal durur. Blob modunda değerler yüzdeye döner ve her kaydırıcı o köşenin YATAY yarıçapını söyler; dikey yarıçapı araç 100'den çıkararak türetir ve kodu çift listeli (eğik çizgili) biçimde yazar — ilk bakışta karmaşık görünen bu sözdizimi, köşeye iki farklı yarıçap vererek organik damla şekilleri kurar. Sağ paneldeki kod her değişiklikte yenilenir; kopyalayıp kendi CSS dosyanıza yapıştırın ya da İndir düğmesiyle önizlemenin 1200×800 piksellik PNG halini alın.

Bu araç css border radius generator, border radius css, blob shape generator aramalarıyla da biliniyor.

border-radius nedir?

border-radius, bir HTML kutusunun köşelerini yuvarlatan CSS özelliğidir. Tek değer dört köşeye birden uygulanır; dört değere kadar yazılarak her köşe ayrı ayarlanır, eğik çizgili biçim ise her köşeye yatay ve dikey olmak üzere iki ayrı yarıçap verir. Değer piksel gibi sabit birimle ya da kutunun kendi ölçüsüne bağlı yüzdeyle yazılabilir; yüzde 50, kare bir kutuyu tam daireye çevirir. Köşe yuvarlama yalnızca çizimdir — kutunun yerleşimini ve boyutunu değiştirmez.

Blob şekli nedir?

Blob, web tasarımında düzgün geometrik olmayan, damlayı ya da deniz taşını andıran organik şekillere verilen addır. CSS'te tek bir kutuya eğik çizgili border-radius yazarak elde edilir: her köşeye farklı bir yatay ve dikey yarıçap verildiğinde köşeler çeyrek elipse döner ve kutunun dikdörtgenliği gözden kaybolur. Arka plan süsü, portre çerçevesi ve tanıtım sayfası görselleri en yaygın kullanım yerleridir; şekil kod olduğu için görsel dosyası gerektirmez ve her boyutta keskin kalır.

Piksel ile yüzde border-radius arasındaki fark nedir?

Piksel değeri mutlaktır: 16 piksellik köşe, kutu ister 200 ister 1000 piksel genişliğinde olsun aynı büyüklükte yuvarlanır — kart ailelerinin tutarlı görünmesi bundandır. Yüzde ise kutunun kendi ölçüsüne bağlıdır: yatay yarıçap genişliğin, dikey yarıçap yüksekliğin yüzdesi olarak hesaplanır. Bu yüzden yüzde 50 kare kutuda daire, dikdörtgen kutuda elips üretir ve kutu büyüdükçe köşe de büyür. Pratik kural: arayüz bileşenlerinde piksel, daire ve blob gibi şekil işlerinde yüzde kullanın.

Taşan yarıçap tuzağı: 100 piksel neden daire yapmıyor?

Kaydırıcıyı sonuna çektiğinizde şeklin bir yerden sonra değişmediğini görebilirsiniz. Bu bir hata değil, CSS'in taşma kuralıdır: bir kenardaki iki yarıçapın toplamı kenarın uzunluğunu aşarsa tarayıcı BÜTÜN yarıçapları aynı katsayıyla küçültür. 200 piksel genişliğindeki bir düğmeye 100 + 100 piksel yarıçap sığar; 300 piksellik bir karta iki 100'lük köşe rahat sığdığı için orada büyüme sürer. Önizlememiz de aynı kuralı uygular, yani gördüğünüz şekil tarayıcının çizeceği şeklin aynısıdır.

Tam daire ya da hap (pill) biçimi istiyorsanız pikselle uğraşmayın: border-radius: 50% kare kutuyu daireye, border-radius: 999px dikdörtgen düğmeyi hap biçimine çevirir. 999 gibi kocaman bir değer taşma kuralı sayesinde güvenlidir — tarayıcı onu sığabilen en büyük yarıçapa kendisi indirir.

Hangi durumda hangi köşe?

Köşe yarıçapı da gölge gibi bir dil taşır: küçük yarıçap ciddiyet, büyük yarıçap yumuşaklık ve samimiyet okutur.

• Kart, kutu, giriş alanı → 8-16 piksel: köşe fark edilir ama dikkat çekmez
• Düğme → 8-12 piksel köşeli, 999 piksel hap biçimi: ikisi de yaygın, ama sayfada tek dil seçin
• Profil fotoğrafı, rozet → yüzde 50: kare içerik tam daireye döner
• Tanıtım grafiği, süslü arka plan → blob modu: yüzdeli çift yarıçap organik şekil kurar

Sık sorulanlar

border-radius değerlerinin sırası ne anlama geliyor?

Dört değer sol üstten başlayıp saat yönünde döner: sol üst, sağ üst, sağ alt, sol alt. Daha az değer yazılırsa eksikler çaprazından kopyalanır: iki değer yazıldığında ilki sol üst ile sağ altı, ikincisi sağ üst ile sol altı belirler. Bu araç kodu her zaman en kısa geçerli biçimde yazar; kaydırıcılar eşitlendikçe kodun kısaldığını görürsünüz.

Eğik çizgili (30% 70% ... / 70% 30% ...) yazım nedir?

Eğik çizginin solu köşelerin yatay, sağı dikey yarıçaplarıdır. İki yarıçap farklı olduğunda köşe çeyrek daire değil çeyrek elips çizer; blob şekillerinin organik görünümü tam olarak buradan gelir. Blob modunda bu araç dikey listeyi sizin yatay değerinizin 100 eksiği olarak türetir — kaydırıcı 30 ise dikey 70 olur; kural sabittir, sürprizi yoktur.

Girdiğim renk neden kodda görünmüyor?

Çünkü border-radius yalnızca köşe geometrisini tanımlar; rengin CSS karşılığı background-color gibi ayrı bir özelliktir. Buradaki renk kutusu, kodu kendi zemininizde nasıl duracağını görmeniz için önizlemeyi boyar. Kodu kopyaladığınızda kendi öğenizin rengi neyse köşeler ona uygulanır.

İndir düğmesi ne kaydediyor?

Önizlemedeki şeklin 1200×800 piksellik PNG halini — tasarım sunumuna ya da onaya köşe biçimini koymak için kullanışlıdır. Kodun kendisi için Çıktıyı kopyala düğmesini kullanın; görselin köşesini yuvarlayıp dosya olarak indirmek isterseniz o iş bu sitedeki görsel köşe yuvarlama aracınındır.