İçeriğe atla
SPCX Tools

Border Radius

CSS yuvarlak kenarları ve şekilleri görsel olarak tasarlayın, ardından kodu tek tıkla kopyalayın.

Yerel çalışır — dosyalarınız cihazınızdan dışarı çıkmaz

Araç yükleniyor…

Border Radius nasıl kullanılır

  1. 1Tercih ettiğiniz birimi seçin (sabit kavisler için "px" veya duyarlı şekiller için "%").
  2. 2Tüm köşeleri birlikte ayarlamak için "Köşeleri bağla" onay kutusunu kullanın veya her köşeye ayrı değer atamak için işareti kaldırın.
  3. 3Border radius değerini ayarlamak için kaydırıcıları sürükleyin ve önizleme şeklinin gerçek zamanlı olarak güncellenmesini izleyin.
  4. 4Alternatif olarak; hap, daire, sekme veya yaprak gibi sık kullanılan şekilleri anında oluşturmak için hazır ayar butonlarından birine tıklayın.
  5. 5Stil dosyanızda kullanmak üzere alt kısımda oluşturulan CSS kodunu kopyalayın.

Görsel border radius oluşturucu

Web bileşenleriniz için mükemmel yuvarlatılmış köşeler oluşturmak, sayıları tahmin etmeyi ve tarayıcınızı sürekli yenilemeyi gerektirmemelidir. Bu görsel border radius oluşturucu, kaydırıcıları ayarlamanıza ve kavislerin bir öğeyi nasıl etkilediğini anında görmenize olanak tanır. İstediğiniz tam görünümü elde ettiğinizde, optimize edilmiş CSS kodunu doğrudan panonuza kopyalayabilirsiniz.

Tüm hesaplamalar ve önizlemeler doğrudan tarayıcınızda gerçekleştiği için bu araç inanılmaz derecede hızlı ve tamamen gizlidir. Tasarladığınız veya tıkladığınız hiçbir veri asla bir sunucuya yüklenmez.

CSS ile köşe yuvarlamada ustalaşın

border-radius özelliği; butonlar, görseller, modallar ve kapsayıcı elemanların sert kenarlarını yumuşatmak için kullanılan, modern web tasarımının temel bir parçasıdır. İlk bakışta basit görünse de, belirli köşeleri hedeflemek istediğinizde CSS sözdizimi şaşırtıcı derecede detaylı olabilir.

Bu border-radius CSS oluşturucu, CSS shorthand (kısaltma) yapısını anlamanıza ve etkili bir şekilde kullanmanıza yardımcı olur. Tüm köşeleri birbirine bağladığınızda, araç tek bir değer üretir (örneğin, border-radius: 16px;). Özel bir şekil oluşturmak için köşeleri birbirinden bağımsız hale getirirseniz, oluşturucu CSS'yi girdilerinize göre otomatik olarak biçimlendirir:

  • Dört değer: Tüm köşeler farklıysa, CSS bunları sol üstten başlayarak saat yönünde uygular (örn. border-radius: 16px 8px 4px 2px;).
  • İki değer: Sol üst köşe sağ alt köşe ile ve sağ üst köşe sol alt köşe ile eşleşiyorsa, araç kodu akıllıca iki değere kısaltır (örn. border-radius: 16px 0;).

Piksel ve Yüzde

CSS'te köşe yuvarlama yaparken en sık yaşanan ikilemlerden biri doğru birimi seçmektir. Bu araç, kullanıcı arayüzü (UI) tasarımında farklı amaçlara hizmet eden pikseller (px) ve yüzdeler (%) arasında kolayca geçiş yapmanızı sağlar.

Pikseller (px) mutlak birimlerdir. 12px'lik bir border-radius değeri, ister küçük bir butona ister devasa bir hero görseline uygulansın, her zaman tamamen aynı görünür. Tüm uygulamanızda tutarlı ve tek tip bir tasarım dili sağladıkları için kartlar, açılır menüler ve form giriş alanları gibi UI bileşenlerinde standart tercih piksellerdir. Bu araç 200px'e kadar piksel değerlerine izin verir.

Yüzdeler (%) ise öğenin kendi boyutuna göre orantılıdır. Kare bir öğeye uygulanan 50% border-radius, karenin genişliği ister 50 piksel ister 500 piksel olsun, her zaman kusursuz bir daire oluşturur. Eğer öğe bir dikdörtgense, 50% değeri eliptik bir oval şekil yaratır. Yüzdeler, profil avatarları veya dekoratif arka plan şekilleri (blob) gibi duyarlı (responsive) öğeler için idealdir. CSS'te bu değerin üzerine çıkmak görsel yuvarlama etkisini artırmadığı için, bu araç yüzde değerlerini 50% ile sınırlar.

Temel köşelerin ötesinde: CSS şekil oluşturucu

Genellikle hafif yuvarlamalar için kullanılsa da border-radius aynı zamanda güçlü bir css şekil oluşturucudur. Köşeleri birbirinden bağımsız hale getirip uç değerleri harmanlayarak, SVG dosyalarına veya karmaşık clip-path'lere ihtiyaç duymadan benzersiz geometrik şekiller oluşturabilirsiniz. Araç, bunu göstermek için çeşitli hazır ayarlar içerir:

  • Kapsül: Tüm köşelere yapay olarak yüksek bir piksel değeri (örneğin 9999px) uygulayarak bir "kapsül" veya stadyum şekli oluşturabilirsiniz. Bu şekil rozetler, etiketler ve modern eylem çağrısı (CTA) butonlarında yaygın olarak kullanılır. Tarayıcı, gerçek yuvarlamayı öğenin yüksekliğinin tam yarısıyla sınırlandırarak kenarlarda kusursuz yarım daireler oluşmasını sağlar.
  • Daire: Tüm köşeleri 50% olarak ayarlamak, bir kareyi kusursuz bir daireye dönüştürür.
  • Yaprak: Sol üst ve sağ alt köşeleri 0 olarak ayarlayıp, sağ üst ve sol alt köşelere yüksek bir değer (örneğin 48px) vererek asimetrik, organik bir yaprak şekli oluşturabilirsiniz.
  • Sekme: Alt köşeleri 0 bırakıp yalnızca sol üst ve sağ üst köşeleri yuvarlayarak (örn. 16px), gezinme menüleri için ideal olan klasik bir klasör sekmesi şekli oluşturabilirsiniz.

UI bileşenlerinizi mükemmelleştirin

Yuvarlatılmış köşeler nadiren tek başına kullanılır; genellikle daha geniş ve tutarlı bir tasarım sisteminin parçasıdır. Örneğin iyi tasarlanmış bir kart bileşeni, sayfada öne çıkmak için hafif bir köşe yuvarlama efektini derinlik ve renkle harmanlar.

İdeal border radius değerinizi oluşturduktan sonra, tasarımınızı tamamlamak için bunu diğer CSS efektleriyle birleştirebilirsiniz. Yükseltilmiş ve havada duran bir etki yaratmak için Box Shadow Oluşturucu aracımızı kullanarak yeni şeklinize yumuşak bir gölge eklemeyi deneyin. Bir butonu veya dekoratif bir arka plan öğesini tasarlıyorsanız, CSS Gradient Oluşturucu ile canlı bir arka plan uygulayabilir veya Renk Paleti Oluşturucu ile birbirini mükemmel tamamlayan düz renkler bulabilirsiniz.

Sıkça sorulan sorular

CSS border-radius özelliği nedir?
CSS border-radius özelliği, bir öğenin dış kenarlığının köşelerini yuvarlatır. Daire veya yuvarlatılmış dikdörtgen yapmak için tek bir yarıçap ayarlayabilir ya da karmaşık şekiller oluşturmak için her köşeye farklı yarıçaplar belirleyebilirsiniz.
Piksel (px) mi yoksa yüzde (%) mi kullanmalıyım?
Öğenin boyutundan bağımsız olarak standart 8px yuvarlatılmış bir kart gibi sabit ve tutarlı bir kavis istediğinizde piksel (px) kullanın. Kusursuz bir daire veya oval oluşturmak için %50 kullanmak gibi, kavisin öğeyle birlikte ölçeklenmesini istediğinizde yüzde (%) kullanın.
CSS ile tam bir daire nasıl yapılır?
Tam bir daire yapmak için HTML öğenizin genişliği ve yüksekliği eşit (kare) olmalı ve border-radius %50 olarak ayarlanmalıdır. Gerekli kodu oluşturmak için bu araçtaki "Daire" ön ayarını kullanabilirsiniz.
Hap şekli nasıl yapılır?
Hap şekli, border-radius için 9999px gibi çok yüksek bir piksel değeri ayarlanarak oluşturulur. Bu, öğenin genişliği ne olursa olsun sol ve sağ (veya üst ve alt) kenarların tamamen yuvarlatılmış yarım daireler olmasını sağlar.
Oluşturulan CSS neden bazen dörtten az değere sahip oluyor?
CSS, border-radius için kısa yazım (shorthand) kullanır. Dört köşe de aynıysa tek bir değer (örn. 16px) verir. Sol üst/sağ alt eşleşiyorsa ve sağ üst/sol alt eşleşiyorsa iki değer verir. Bu, CSS kodunuzun temiz ve kısa olmasını sağlar.
Tasarım verilerim herhangi bir yere kaydediliyor mu?
Hayır, bu border radius oluşturucu tamamen tarayıcınızda çalışır. Hiçbir sunucuya veri gönderilmez veya kaydedilmez, böylece hızlı ve gizli bir deneyim sağlanır.

İlgili araçlar

Box Shadow OluşturucuCanlı önizleme ile yumuşak, keskin, katmanlı veya iç gölgeleri ince ayarlayın ve CSS kodunu kopyalayın.CSS Gradient OluşturucuGörsel olarak bir gradient arka plan tasarlayın ve CSS'i kopyalayın — doğrusal, radyal veya konik.Renk Paleti OluşturucuBir renk seçin ve renk teorisine dayanan uyumlu beşli renk paletinizi oluşturun.Renk Körlüğü SimülatörüTasarımlarınızın erişilebilir olduğundan emin olmak için görsellerinizi renk görme eksikliği olan birinin gözünden önizleyin.Renk Kontrastı TestiMetninizin yeterince okunaklı olup olmadığını kontrol edin ve WCAG standartlarını karşılayan en yakın rengi bulun.Renk DönüştürücüHerhangi bir rengi HEX, RGB, HSL, HSV ve CMYK arasında dönüştürün ve kontrastını kontrol edin.