border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Ücretsiz Online Kenar Yarıçapı Oluşturucu — CSS Görsel Düzenleyici

Görsel olarak özel CSS kenar yarıçapı değerleri oluşturun. Anlık önizleme ve hemen CSS çıktısıyla yuvarlak köşeler, pil butonları, organik bloblar ve yaratıcı şekiller tasarlayın.

Kenar Yarıçapı Oluşturucusu Nedir?

Kenar yarıçapı oluşturucu, web tasarımcıların CSS border-radius değerleri oluşturmak için elle piksel veya yüzde değerlerini hesaplamadan görsel bir araçtır. Sayıları yazmak ve tarayıcıyı yenilemek yerine kaydırıcıları ayarlayarak şekli anlık olarak değiştirebilirsiniz.

CSS border-radius özelliği, bir öğenin köşelerini yuvarlar. En esnek CSS özelliklerinden biridir — küçük yuvarlak köşelerden karmaşık organik blob şekillerine kadar her şeyi oluşturabilir.

Bu Kenar Yarıçapı Oluşturucusunu Nasıl Kullanılır?

1. Bir önceden ayarlanmış stil seçin — Yuvarlak, pil, blob, yaprak, damla veya morf şekillerinden başlayın.
2. Kaydırıcıları ayarlayın — Her köşeyi ayrı ayrı veya birbirine bağlayarak kontrol edin.
3. Boyutları ayarlayın — Öğenize uygun genişlik ve yükseklik belirleyin.
4. Renkleri özelleştirin — Kutu rengini ve önizleme arka planını ayarlayın.
5. CSS'yi kopyalayın — Kopyalama butonuna tıklayıp stiller dosyasına yapıştırın.

Ana Özellikler

Özellik	Fayda
Bireysel köşe kontrolü	Her köşeyi ayrı ayrı ayarlayarak benzersiz şekiller oluşturun
Köşeleri bağla/boz	Eşit ve özel köşeler arasında geçiş yapın
6 şekil önceden ayarlanmış stil	Yaygın kenar yarıçapı desenlerinden hızlıca başlayın
Genişlik & yükseklik kontrolleri	Gerçek öğe boyutlarınıza uyun
Anlık önizleme	Ayarlama yaparken şekli hemen güncelleyin
Panoya kopyalama	Bir tıklamayla CSS dışa aktarımı

CSS Kenar Yarıçapı'nı Anlamak

Sözdizimi

border-radius özelliği, her köşeye bir değer alabilir:

border-radius: sol-üst sağ-üst sağ-alt sol-alt;

Değer Deseni	Etkilenen Köşeler
16px	Tüm dört köşe eşit şekilde
16px 8px	Sol-üst + sağ-alt / sağ-üst + sol-alt
16px 8px 4px	Sol-üst / sağ-üst + sol-alt / sağ-alt
16px 8px 4px 2px	Her köşe ayrı ayrı

Piksel vs Yüzde

• Piksel (px): Öğe boyutundan bağımsız sabit köşe yarıçapı.
• Yüzde (%): Öğenin boyutuna göre oransal. Karede 50% mükemmel bir daire oluşturur; dikdörtgende 50% elips oluşturur.

Daire ve Pil Oluşturma İçin Yüzde Kullanımı

border-radius: 50% bir karede mükemmel bir daire oluşturur. Pil şeklindeki butonlar için büyük bir piksel değeri (örneğin 999px) kullanın — bu, yarıçap her zaman kısa kenarın yarısından fazla olduğundan, öğe boyutuna bakılmaksızın tamamen yuvarlak uçlar oluşturur.

Şekil Önceden Ayarlanmış Stilleri Karşılaştırma

Önceden Ayarlanmış Stil	Değerler	Kullanım Alanı
Yuvarlak	16px eşit	Kartlar, modaller, resimler
Pil	999px eşit	Butonlar, etiketler, püf noktaları
Blob	60px 40px 70px 30px	Dekoratif öğeler, anasayfa bölümleri
Yaprak	0 100px 0 100px	Organik UI öğeleri, dekoratif bölümler
Damla	0 100px 100px 0	Açıklamalar, işaretlemeler, ipuçları
Morf	30px 70px 50px 80px	Soyut şekiller, arka planlar

Gerçek Hayatta Kullanım Alanları

Buton Stili

border-radius: 999px kullanarak modern ve dostça bir görünümle piller şeklindeki butonlar oluşturun. Bu, çoğu tasarım sistemi tarafından kullanılır.

Kart Bileşenleri

İnce yuvarlaklık (8–16px) kart kenarlarını yumuşatır ve görsel hiyerarşiyi bozmadan oluşturur.

Profil Avatarları

Kare resimlerde border-radius: 50% kullanarak daire şeklindeki avatarlar oluşturun. Sosyal uygulamalar ve panellerde yaygın olarak kullanılır.

Dekoratif Bloblar

Büyük arka plan öğelerinde asimetrik yarıçap değerleri, modern web tasarımı için popüler organik blob şekilleri oluşturur.

Özel Açıklamalar

Karışık değerler (örneğin 8px 8px 8px 0) kullanarak tetikleyen öğeye işaret eden bir köşesi keskin olan bir açıklama oluşturun.

Daha İyi Kenar Yarıçapı İçin İpuçları

İpucu	Açıklama
Konsistans sağlayın	Tasarım sisteminizde aynı yarıçap kullanın (örneğin küçük için 8px, büyük için 16px).
Oransal birimleri kullanın	Yanıt veren daireler için 50% kullanın, sabit piksel değeri yerine.
Pill için büyük değerler	Her öğede tamamen yuvarlak uçlar oluşturmak için 9999px veya 999px kullanın.
Organik şekiller için açın	Asimetrik köşeler ilgi çekici ve benzersiz şekiller oluşturur.
İçerik dikkatini alın	Aşırı yuvarlaklık metin ve içeriğin kesilmesine neden olabilir.
Transform'larla birleştirin	Özel yarıçaplara sahip öğeleri döndürün veya eğin, daha yaratıcı şekiller oluşturun.

Sıkça Sorulan Sorular

Kenar yarıçapı öğe boyutundan büyük olduğunda ne olur?

Tarayıcı, değeri kısa kenarın yarısına kıstırır. Örneğin 999px bir öğede 50px boyutunda bir öğe için 25px olarak ayarlanır.

border-radius kullanmak zorunlu mu?

Hayır. border-radius kullanmak isteğe bağlıdır. Ancak, öğelerin köşelerini yuvarlamak için en yaygın yoldur.

border-radius ve border birlikte kullanılabilir mi?

Evet. border-radius ve border birlikte kullanılabilir. Örneğin border: 2px solid black; border-radius: 50%; kullanarak bir daire oluşturabilirsiniz.

border-radius öğenin boyutundan bağımsız mı?

Hayır. border-radius öğenin boyutuna göre oransal. Örneğin 50% bir karede mükemmel bir daire oluşturur; dikdörtgende elips oluşturur.

border-radius kullanmak tarayıcı uyumluluğu açısından sorun çıkar mı?

Hayır. border-radius tarayıcı uyumluluğu açısından sorun çıkarmaz. Ancak, eski tarayıcılar border-radius desteklemeyebilir.

border-radius değerleri negatif olabilir mi?

Hayır. border-radius değerleri negatif olamaz. Negatif değerler geçersizdir.

border-radius değerleri % olarak belirtilebilir mi?

Evet. border-radius değerleri % olarak belirtilebilir. Örneğin 50% bir karede mükemmel bir daire oluşturur.