CSS Border Radius ile Yuvarlak Köşeler ve Özel Şekiller Oluşturma Rehberi

Web tasarımlarında kutu gibi keskin köşeler yerine yumuşak geçişler ve özgün şekiller kullanmak, modern ve kullanıcı dostu arayüzler tasarlamanın temel yollarından biridir. CSS border-radius özelliği, web sayfalarındaki HTML öğelerinin köşelerini yuvarlatmaktan organik "blob" şekilleri ve elipsler oluşturmaya kadar geniş bir yelpazede esneklik sunar.

Bu yazıda, CSS border-radius özelliğinin temellerini, gelişmiş 8-değerli (eight-value) sözdizimini ve bu özellikle nasıl yaratıcı tasarımlar yapabileceğinizi öğreneceğiz.

CSS Border Radius Temelleri

border-radius özelliği, bir kutunun köşelerinin ne kadar yuvarlatılacağını belirler. En temel kullanımı oldukça basittir:

/* Tüm köşeleri 10 piksel yuvarlatır */
border-radius: 10px;

/* Yüzdesel kullanım (Tam daire oluşturmak için) */
border-radius: 50%;

border-radius özelliğine birden fazla değer girerek her bir köşeyi bağımsız olarak kontrol edebilirsiniz:

• Tek Değer: Tüm köşelere aynı yarıçapı uygular.
• İki Değer: İlk değer sol-üst ve sağ-alt köşelere, ikinci değer ise sağ-üst ve sol-alt köşelere uygulanır.
• Üç Değer: İlk değer sol-üst, ikinci değer sağ-üst ve sol-alt, üçüncü değer ise sağ-alt köşeye uygulanır.
• Dört Değer: Sırasıyla sol-üst, sağ-üst, sağ-alt ve sol-alt köşelere uygulanır (saat yönünde).

Gelişmiş Kullanım: 8-Değerli Sözdizimi (Eight-Value Syntax)

Pek çok geliştirici border-radius özelliğinin sadece 4 değer alabileceğini düşünür. Ancak asıl güç, köşeleri asimetrik olarak yuvarlatmanıza olanak tanıyan 8-değerli sözdiziminde yatar.

Bu yapıda, eğrinin yatay ve dikey yarıçapları (horizontal and vertical radii) eğik çizgi (/) ile birbirinden ayrılır:

border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;

Eğik çizginin solundaki değerler köşelerin yatay yarıçaplarını, sağındaki değerler ise dikey yarıçaplarını temsil eder. Bu ayrım sayesinde yumurta, yaprak, limon veya tamamen organik akışkan (blob) şekiller tasarlayabilirsiniz.

Border Radius ile Özel Şekiller Nasıl Oluşturulur?

1. Kusursuz Bir Daire

Bir öğeyi tam daire yapmak için genişlik ve yükseklik değerleri eşit olmalı (kare) ve border-radius değeri %50 olarak ayarlanmalıdır.

2. Elips (Oval)

Eğer genişlik ve yükseklik değerleri birbirinden farklıysa, border-radius: 50% kullanımı mükemmel bir elips ortaya çıkarır.

3. Organik Blob Şekilleri

Web sitelerinde arka plan dekorasyonu veya resim çerçevesi olarak kullanılan modern akışkan şekiller (blob) için 8-değerli sözdizimini kullanmanız gerekir. Örneğin:

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Bu karmaşık yüzde hesaplamalarını elle deneyip yanılma yöntemiyle yapmak oldukça zaman alabilir. Farklı köşeleri görsel olarak sürükleyip anında asimetrik şekiller oluşturmak ve CSS kodunu kopyalamak için CSS Border Radius Oluşturucu aracımızı kullanabilirsiniz. Bu araç sayesinde sıradışı tasarımları hızlıca prototipleyebilirsiniz.

Border Radius Kullanırken Dikkat Edilmesi Gerekenler

• Taşan İçerikler: Bir kutunun köşelerini çok fazla yuvarlattığınızda, içindeki metinler veya görseller bu yuvarlatılmış sınırların dışına taşabilir. Bu durumu engellemek için öğeye overflow: hidden; özelliğini eklemeniz gerekir. Bu sayede içindeki içerik köşelere göre kırpılacaktır.
• Performans: Yüzlerce öğede çok karmaşık border-radius ve birlikte box-shadow kullanımı, eski mobil cihazlarda render performansını çok az da olsa etkileyebilir. Bu yüzden aşırıya kaçmamak önemlidir.
• Yüzde (%) ve Piksel (px) Farkı: Piksel değeri mutlak bir yuvarlaklık oluştururken, yüzde değeri öğenin genişlik ve yüksekliğine oranlanır. Dolayısıyla dikdörtgen bir kutuda yüzde kullanırsanız köşeler asimetrik elips şeklinde bükülür. Piksel kullanırsanız dairesel kalır.