CSS Kenarlık Yarıçapı Oluşturucu

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

Kullanıcıların herhangi bir HTML öğesi için görsel olarak yuvarlak köşeler ayarlamasına ve anında CSS `border-radius` özelliği kodunu oluşturmasına olanak tanır - manuel yazmaya gerek yoktur.

CSS Border Radius Nedir?

`border-radius` CSS özelliğini açıklayın: ne işe yaradığını (bir öğenin dış kenarının köşelerini yuvarlar), dört ayrı köşeyi (sol üst, sağ üst, sağ alt, sol alt) ve değerlerin `px`, `%`, `em` veya `rem` cinsinden nasıl ifade edilebileceğini açıklayın. Asimetrik tasarımlar için dördünün de bağımsız olarak ayarlanabileceğini belirtin.

CSS Border Radius Oluşturucu Nasıl Kullanılır?

Basit, adım adım bir bölüm:

Her köşe için (Sol Üst, Sağ Üst, Sağ Alt, Sol Alt) yarıçap değerini ayarlamak için kaydırıcıları sürükleyin.
Dört köşeye birden tek tip bir yarıçap uygulamak için Köşeleri Birlikte Kilitle'yi etkinleştirin.
Anında yaygın şekiller için ön ayar düğmelerini kullanın: keskin kare, yuvarlak dikdörtgen, tam daire/hap veya çapraz eğri.
Canlı önizleme kutusunun gerçek zamanlı olarak güncellenmesini izleyin.
Oluşturulan CSS kodunu tek tıklamayla kopyalayın.

Border Radius Ön Ayarları Açıklandı

Dört yerleşik ön ayarı ve kullanım durumlarını ele alın:

Keskin (0px) – düz, modern UI kartları ve tablo hücreleri için.
Yuvarlak (8px) – en yaygın UI kuralı; düğmelerde, kartlarda, modallarda kullanılır.
Hap / Daire (999px) – rozetler, etiketler, avatar resimleri ve CTA düğmeleri için.
Çapraz (999px / 0px dönüşümlü) – açılış sayfalarında popüler olan yaratıcı asimetrik tasarım öğeleri için.

Köşeleri Kilitleme ve Bireysel Köşe Kontrolü

Tek tip border-radius (örn. `border-radius: 12px`) ile dört değerli kısaltma (örn. `border-radius: 12px 0px 12px 0px`) arasındaki farkı açıklayın. Kilitli modun (düğmeler, kartlar) ne zaman kullanılacağını ve bireysel modun (konuşma balonları, organik şekiller, özel UI şekilleri) ne zaman kullanılacağını açıklayın.

CSS Çıktısını Anlama

Oluşturulan kodu parçalayın:

css

border-radius: 12px 12px 12px 12px;

Sırayı açıklayın: **sol üst → sağ üst → sağ alt → sol alt** (sol üstten saat yönünde). Kısaltma kurallarına dikkat edin: dört değerin tümü aynıysa, tek bir değer yeterlidir (örneğin, `border-radius: 12px`).

CSS Border Radius İçin Yaygın Kullanım Durumları

Pratik, gerçek dünya uygulamalarını kapsar:

Düğmeler – hafif yuvarlama (6–8 piksel) tıklanabilirlik algısını iyileştirir.
Kartlar ve konteynerler – 12–16 piksel, SaaS kullanıcı arayüzleri için endüstri standardıdır.
Avatar / profil resimleri – dairesel kırpmalar için %50 veya 999 piksel.
Giriş alanları – modern form tasarımı için hafif yuvarlama (4–8 piksel).
Hero bölümleri ve bannerlar – görsel farklılaşma için asimetrik yarıçaplar.
Araç ipuçları ve açıklama kutuları – tetikleyici öğeyi işaret eden bir keskin köşe.
Rozetler ve etiketler – etiketler, kategoriler ve durum göstergeleri için hap şekli (999 piksel).

CSS Border Radius ve Tarayıcı Uyumluluğu

`border-radius`'un tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge) satıcı önekleri olmadan desteklendiğini unutmayın. IE8 desteği gerektiren eski projelerin `-webkit-border-radius` ve `-moz-border-radius` öneklerine ihtiyaç duyabileceğini, ancak bunların mevcut geliştirmede eskimiş olduğunu belirtin.

Web Tasarımında Border Radius Kullanımı İçin İpuçları

Tasarım sisteminizde tutarlı yarıçaplar kullanın (örneğin, girişler için 8 piksel, kartlar için 12 piksel, haplar için 999 piksel).
Tek bir sayfada çok fazla farklı yarıçapı karıştırmaktan kaçının – görsel tutarsızlık yaratır.
Ölçeklenebilir kullanıcı arayüzleri için, köşelerin kullanıcının yazı tipi boyutuyla ölçeklenmesi için `rem` veya `em` değerlerini tercih edin.
Alt öğeleri kırparken (örneğin, yuvarlak resim kartları) `border-radius`'u `overflow: hidden` ile birleştirin.
Modern açılış sayfası hero grafiklerinde popüler olan "organik blob" şekilleri oluşturmak için büyük asimetrik değerler kullanın.

Sıkça Sorulan Sorular

CSS border-radius oluşturucu nedir?

CSS border-radius oluşturucu, HTML öğelerinin köşe yuvarlamasını görsel olarak ayarlamanıza ve doğru border-radius CSS kodunu anında çıktı almanıza olanak tanıyan ücretsiz bir çevrimiçi araçtır, böylece değerleri manuel olarak yazma veya tahmin etme ihtiyacını ortadan kaldırır.

Bir daire için CSS border-radius'u nasıl oluştururum?

Dört köşe değerinin hepsini 999 piksel (veya öğe mükemmel bir kare ise %50) olarak ayarlayın. CSS border-radius oluşturucu, bu şekil için tek tıklamayla bir ön ayar sağlar.

Her köşe için farklı border-radius değerleri ayarlayabilir miyim?

Evet. Oluşturucudaki "Köşeleri birlikte kilitle" seçeneğinin işaretini kaldırın, ardından sol üst, sağ üst, sağ alt ve sol alt için özel değerler ayarlamak üzere dört kaydırıcının her birini bağımsız olarak sürükleyin.

CSS border-radius için hangi birimleri kullanabilirim?

border-radius özelliği px, %, em, rem ve vw/vh kabul eder. Pratikte en yaygın olanlar, sabit kullanıcı arayüzleri için px ve akışkan veya dairesel şekiller için %'dir. Bu oluşturucu, hassasiyet için px değerleri verir.

border-radius için CSS kısaltması nedir?

Kısaltma border-radius: TL TR BR BL, sol üstten başlayarak saat yönünde dört köşeyi ayarlar. Dört değerin hepsi eşitse, tek bir değer yazabilirsiniz: border-radius: 12px.

CSS border-radius oluşturucu ücretsiz mi?

Evet, araç tamamen ücretsizdir. Hesap veya kayıt gerekmez. Sadece kaydırıcıları ayarlayın, sonucu önizleyin ve oluşturulan kodu kopyalayın.

border-radius resimlerde çalışır mı?

Evet. Bir etiketine border-radius uygulamak, görünür köşelerini yuvarlar. Çocuk içeriğinin (bir

içindeki bir resim gibi) de kırpıldığından emin olmak için, ana kapsayıcıya overflow: hidden ekleyin.

border-radius ile -webkit-border-radius arasındaki fark nedir?

-webkit-border-radius, Safari ve Chrome'un standart border-radius özelliğini benimsemeden önce gerekli olan eski bir satıcı önekiydi. Modern tarayıcılar artık buna ihtiyaç duymaz ve herhangi bir önek olmadan border-radius'u güvenle kullanabilirsiniz.

CSS border-radius kullanarak hap şeklinde bir düğme nasıl oluştururum?

border-radius'u 999 piksel gibi büyük bir değere ayarlayın. Bu, düğmenin genişliğinden bağımsız olarak tamamen yuvarlak sol ve sağ uçları zorlar ve modern kullanıcı arayüzü tasarımında kullanılan klasik hap şeklini oluşturur.

CSS border-radius kullanarak asimetrik şekiller oluşturabilir miyim?

Evet. Her köşe için farklı değerler ayarlayarak — örneğin, border-radius: 999px 0 999px 0 — çapraz, dalga benzeri veya organik şekiller oluşturabilirsiniz. Oluşturucunun bireysel köşe kaydırıcıları, kodu kopyalamadan önce görsel olarak denemeyi kolaylaştırır.