1. Temel Bilgiler (Tek Değer – Tüm Köşeleri Yuvarlar)

border-radius: 0;

→ Köşeler keskindir.

border-radius: 10px;

→ Tüm köşeler 10px oranında yuvarlanır.

border-radius: 50%;  /* Kare bir öğede */

→ Kare bir öğede tam daire oluşturur.

2. Bireysel Köşeler (Saat Yönünde 4 Değer)

border-radius: 10px 30px 15px 5px;

Değer sırası saat yönündedir:

1. Top-Left (TL) – Sol Üst
2. Top-Right (TR) – Sağ Üst
3. Bottom-Right (BR) – Sağ Alt
4. Bottom-Left (BL) – Sol Alt

3. Eliptik Köşeler (Yatay / Dikey)

border-radius: 60px / 30px;

• / işaretinden önceki değerler → yatay yarıçap
• / işaretinden sonraki değerler → dikey yarıçap

Bu kullanım, oval veya kapsül (pill) şekiller oluşturmak için idealdir.

Profesyonel CSS border-radius Rehberi

border-radius Nedir?

border-radius, bir HTML öğesinin köşelerini yuvarlamak için kullanılan CSS özelliğidir. Modern UI/UX tasarımında kartlar, butonlar, input alanları ve görsel bileşenlerde yaygın olarak kullanılır.

Kullanım Türleri (Detaylı)

1️⃣ Tek Değer

.card {
  border-radius: 12px;
}

Tüm köşelere aynı değer uygulanır.

2️⃣ İki Değer

border-radius: 10px 20px;

• 1. değer → Sol Üst & Sağ Alt
  2. değer → Sağ Üst & Sol Alt

3️⃣ Üç Değer

border-radius: 10px 20px 30px;

• 1. değer → Sol Üst
  2. değer → Sağ Üst & Sol Alt
  3. değer → Sağ Alt

4️⃣ Dört Değer

border-radius: 5px 10px 15px 20px;

Saat yönünde:

TL → TR → BR → BL

5️⃣ Yüzde (%) Kullanımı

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

• Kare öğede %50 → Daire
• Dikdörtgende %50 → Oval

6️⃣ Kapsül (Pill) Buton

.button {
  padding: 10px 20px;
  border-radius: 9999px;
}

Yüksek değer vererek tam oval köşe elde edilir.

7️⃣ Eliptik (Yatay/Dikey) Kullanım

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

Yapı:

border-radius: [yatay değerler] / [dikey değerler];

Bu teknik özellikle modern kart tasarımlarında ve asimetrik UI elemanlarında kullanılır.

Profesyonel Kullanım Senaryoları

Modern Kart Tasarımı

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

Glassmorphism UI

.glass {
  backdrop-filter: blur(10px);
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
}

Responsive Tasarımda Öneri

• Küçük bileşenlerde: 4px – 8px
• Kartlarda: 12px – 20px
• Modal / Büyük container: 24px+
• Tam yuvarlak avatar: %50

Tasarım Prensipleri

✔ Tutarlılık

Tüm tasarım sisteminde aynı radius ölçeğini kullanın (örneğin: 4-8-16-24).

✔ Tasarım Dili

• Küçük radius → Daha kurumsal
• Büyük radius → Daha modern / yumuşak

✔ Performans

border-radius performans açısından hafiftir ve modern tarayıcılar tarafından optimize edilmiştir.

Özet