CSS Kenar Yumuşatma (Border Radius) Üretici

Standart veya organik görünümlü fantezi CSS border-radius kenar yumuşatma şekilleri tasarlayın ve kodu kopyalayın.

Sol Üst Köşe (X): 30%
Sağ Üst Köşe (X): 70%
Sağ Alt Köşe (X): 70%
Sol Alt Köşe (X): 30%
Organik Hazır Şablonlar
CSS Kod Çıktısı
border-radius: 30% 70% 70% 30%;
Tüm Köşeler Eşit (Tailwind CSS)
rounded-[30%_70%_70%_30%]
16.711 görüntülenmeVerileriniz tarayıcınızda işlenir, sunucuya hiçbir şey gönderilmez.

İlgili araçlar

JSON Biçimlendirici
JSON'u çevrimiçi doğrula, güzelleştir ve küçült. Her şey tarayıcında çalışır — ücretsiz ve gizli.
Base64 Çevirici
Base64 metnini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
URL Encode
URL ve sorgu dizelerini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
Renk Seçici
İstediğin rengi seç, CSS ve tasarım araçları için HEX, RGB ve HSL kodlarını anında al. Ücretsiz, gizli, tarayıcında çalışır.

Bu aracı tanıyalım

CSS Border Radius Üretici, bir kutunun her köşesini birbirinden bağımsız şekillendirmenizi ve kaydırıcıları hareket ettirdikçe sonucu canlı önizlemede görmenizi sağlar. Dört köşenin her birinin yatay ve dikey yarıçapını ayarlayıp, hazır border-radius CSS kodunu kopyalayabilirsiniz. Her şey tarayıcınızda yerel olarak çalışır — hiçbir veri herhangi bir sunucuya gönderilmez.

CSS Border Radius Üretici Nedir ve Ne İşe Yarar?

CSS'teki border-radius özelliği, / kısayol sözdizimi kullanılarak dört köşe için ayrı ayrı yatay ve dikey yarıçap olmak üzere toplam sekiz değer alabilir. Bunu elle yazmak ve sonucun nasıl görüneceğini tahmin etmek zahmetlidir. Bu araç, her köşe için bir yatay ve bir dikey kaydırıcı olmak üzere toplam sekiz kontrol sunar, canlı bir önizleme kutusu gösterir ve geçerli CSS kodunu sizin için otomatik oluşturur. Böylece tasarımcılar ve geliştiriciler, yaprak kıvrımları, organik şekiller veya asimetrik yuvarlatılmış kartlar gibi tasarımları deneme-yanılma yapmadan oluşturabilir.

Öne Çıkan Özellikleri

  • Köşe Bazında Kontrol: Dört köşenin (sol üst, sağ üst, sağ alt, sol alt) her biri için ayrı yatay ve dikey yarıçap kaydırıcısı bulunur; bu sayede tam eliptik köşe şekillendirmesi yapılabilir.
  • Canlı Görsel Önizleme: Herhangi bir kaydırıcıyı hareket ettirdiğinizde önizleme kutusu anında güncellenir ve üretilecek CSS ile tam olarak eşleşir.
  • Geçerli, Doğrudan Kullanılabilir CSS: Çıktı, doğru border-radius kısayol sırasını (sol üst, sağ üst, sağ alt, sol alt) ve dikey yarıçaplar için standart / ayraçını kullanır; bu sayede kodu doğrudan stil dosyanıza yapıştırabilirsiniz.
  • Tamamen Çevrimdışı ve Gizli: Tüm hesaplamalar tarayıcınızda yapılır. Hiçbir değer sunucuya gönderilmez.
  • Kayıt Gerektirmez: Sayfayı açıp kaydırıcılarla hemen ayarlama yapmaya başlayabilirsiniz — kurulum veya hesap gerekmez.

Nasıl Kullanılır?

  1. "Yatay yarıçap" başlığı altındaki dört kaydırıcıyı kullanarak her köşenin soldan sağa ne kadar yuvarlak olacağını ayarlayın.
  2. "Dikey yarıçap" başlığı altındaki dört kaydırıcıyı kullanarak her köşenin yukarıdan aşağıya ne kadar yuvarlak olacağını ayarlayın (yatay değerden farklı olduğunda eliptik köşeler oluşur).
  3. Önizleme kutusunun ayarlarınızla anında güncellendiğini gözlemleyin.
  4. Oluşan border-radius CSS kodunu metin kutusundan kopyalayıp stil dosyanıza yapıştırın.

Bu Aracı Neden Tercih Etmelisiniz?

İnternetteki birçok CSS üretici aracı karmaşıktır veya tasarım tercihlerinizi gereksiz yere bir sunucuya gönderir. Bu araç, tüm hesaplamaları ve önizlemeyi doğrudan tarayıcınızda düz CSS kullanarak yapar; bu sayede anında çalışır, ağ isteği gerektirmez ve tasarım verilerinizi hiçbir zaman saklamaz veya iletmez.

Sıkça Sorulan Sorular

Bu araç eliptik (dairesel olmayan) köşeleri destekliyor mu?

Evet. Her köşenin bağımsız bir yatay ve dikey yarıçapı vardır, böylece sadece basit yuvarlak köşeler değil, eliptik köşeler de oluşturabilirsiniz.

Üretici hangi birimi kullanıyor?

Tüm yarıçap değerleri, öğenin kendi genişliği ve yüksekliğiyle doğal olarak ölçeklenen yüzde (%) birimiyle ifade edilir.

Negatif yarıçap değeri girebilir miyim?

Hayır. CSS'te border-radius negatif değer kabul etmez, bu nedenle her kaydırıcı 0-100% aralığıyla sınırlandırılmıştır.

Tasarım verilerim herhangi bir yere yükleniyor mu?

Hayır. Üretici tamamen tarayıcınızda çalışır; hiçbir değer sunucuya gönderilmez.