Yalnızca üst köşeleri nasıl yuvarlatırım?

Üst sol ve üst sağ kaydırıcıları istediğiniz yarıçapa ayarlayın ve alttaki ikisini sıfırda bırakın. Önizleme siz sürükledikçe güncellenir ve kopyalanan CSS alt köşeleri köşeli tutar.

Araç bana hangi CSS'i veriyor?

Dört köşe değerini şu sırayla içeren kullanıma hazır bir border-radius kuralı üretir: üst sol, üst sağ, alt sağ, alt sol. Doğrudan stil sayfanıza yapıştırın.

Ayarlarım bir yere yükleniyor mu?

Hayır. Önizleme ve CSS tamamen tarayıcınızda oluşturulur, bu yüzden hiçbir şey sunucuya gönderilmez. Yükleme yok ve kayıt yok.

CSS Border Radius Oluşturucu

Sol üst: 16px

Sağ üst: 16px

Sağ alt: 16px

Sol alt: 16px

CSS

.element {
  border-radius: 16px 16px 16px 16px;
}

Bu araç ne yapar

Bu araç, yuvarlatılmış köşelere göz kararıyla şekil vermenize olanak tanır ve size eşleşen CSS border-radius değerini verir. Dört köşenin her biri için bir kaydırıcıyı sürüklersiniz ve canlı bir önizleme kutusu gerçek zamanlı olarak güncellenir, böylece kesinleştirmeden önce şeklin tam olarak nasıl göründüğünü görebilirsiniz. Deneme yanılma olmadan kesin bir değer isteyen ön uç geliştiricilerine, bir bileşen stili oluşturan tasarımcılara ve border-radius’in köşe kavislerini nasıl kontrol ettiğini öğrenen herkese yardımcı olur.

Her köşenin kendi kaydırıcısı olduğu için tek tip yuvarlama ile sınırlı değilsiniz. Yalnızca üstü yuvarlatabilir, hap şekli oluşturabilir veya bir sekme ya da kart için tek bir köşeyi kavislendirebilirsiniz.

Nasıl kullanılır

Üst sol köşenin kavisini ayarlamak için üst sol kaydırıcıyı sürükleyin.
Üst sağ köşe için üst sağ kaydırıcıyı sürükleyin.
Alt sağ köşe için alt sağ kaydırıcıyı sürükleyin.
Alt sol köşe için alt sol kaydırıcıyı sürükleyin.
Şekil doğru görününceye kadar önizlemenin her değişiklikle güncellenmesini izleyin.
Üretilen CSS border-radius kuralını kopyalayın ve stil sayfanıza yapıştırın.

Hızlı bir örnek

Yuvarlatılmış üstü ve düz tabanı olan bir kart yapmak için üst sol ve üst sağ kaydırıcıları aynı değere yükseltin ve alt sol ile alt sağı sıfırda tutun. Önizleme sekme benzeri bir şekil gösterir ve kopyalanan kural şöyle bir şey okur: border-radius: 16px 16px 0 0;. Yaygın bir hata, değerlerin üst sol köşeden saat yönünde ilerlediğini unutmaktır, bu yüzden bir köşe beklemediğiniz yerde kavislenirse önizlemeyi kontrol edin.

Tamamen tarayıcınızda çalışır, çalışmanızı gizli tutar, tamamen ücretsizdir ve kayıt gerektirmez.

Sıkça sorulan sorular

Yalnızca üst köşeleri nasıl yuvarlatırım?: Üst sol ve üst sağ kaydırıcıları istediğiniz yarıçapa ayarlayın ve alttaki ikisini sıfırda bırakın. Önizleme siz sürükledikçe güncellenir ve kopyalanan CSS alt köşeleri köşeli tutar.
Araç bana hangi CSS'i veriyor?: Dört köşe değerini şu sırayla içeren kullanıma hazır bir border-radius kuralı üretir: üst sol, üst sağ, alt sağ, alt sol. Doğrudan stil sayfanıza yapıştırın.
Ayarlarım bir yere yükleniyor mu?: Hayır. Önizleme ve CSS tamamen tarayıcınızda oluşturulur, bu yüzden hiçbir şey sunucuya gönderilmez. Yükleme yok ve kayıt yok.