Border Radius Oluşturucu
CSS border-radius degerlerini gorsel olarak olusturun. Her kose icin kaydiricilari surukleyin, sonucu gercek zamanli gorun ve CSS kodunu kopyalayin.
Öne çıkan özellikler
- Bireysel köşe yarıçapı kontrolü
- Tekdüzen değerler için köşeleri bağla/çöz
- Hazır şekiller (hap, daire, yaprak, bilet)
- Tek tıkla CSS kodu kopyalama
Guide
CSS border-radius özelliği, öğelerin köşelerinin yuvarlanmasını kontrol eder. En basit halinde border-radius: 8px, dört köşenin tamamını 8 piksel yuvarlar. En karmaşık halinde border-radius, organik, dairesel olmayan şekiller üreten asimetrik, eliptik köşeler oluşturmak için sekiz değer (eğik çizgiyle ayrılmış dört yatay yarıçap ve dört dikey yarıçap) kabul eder. Bu kılavuz border-radius'ın her yönünü ele almaktadır: sözdizimi, görsel efektler, yaygın desenler, performans değerlendirmeleri ve tasarım uygulamaları. Temel sözdizimi, her köşenin çemberinin yarıçapını temsil eden bir ila dört değer alır. Tek bir değer dört köşenin tümüne uygulanır: border-radius: 10px. İki değer sol-üst/sağ-alt ve sağ-üst/sol-alt belirler: border-radius: 10px 20px. Üç değer sol-üst, sağ-üst/sol-alt ve sağ-alt belirler: border-radius: 10px 20px 30px. Dört değer, sol-üstten başlayarak saat yönünde her köşeyi tek tek belirler: border-radius: 10px 20px 30px 40px. Ayrıca uzun yazım özellikleriyle tek tek köşeleri hedefleyebilirsiniz: border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius. Yüzde değerler, öğeyle birlikte ölçeklenen efektler yaratır. Kare bir öğede border-radius: 50% mükemmel bir daire üretir. Dikdörtgen bir öğede %50 bir elips üretir. Bunun nedeni, yüzde değerlerinin öğenin boyutlarına göreli olmasıdır: yatay yarıçaplar genişliğin yüzdesi, dikey yarıçaplar yüksekliğin yüzdesidir. border-radius: 50% olan 200px x 100px bir öğe, 100px yatay yarıçapa ve 50px dikey yarıçapa sahip köşelere sahiptir ve bu da daire yerine bir elips yaratır. Bu boyutsal ilişki, öğe oranlarının farklı görüntü alanı boyutlarında değiştiği duyarlı düzenlerle çalışırken anlamak için önemlidir. Eğik çizgi sözdizimi, yatay ve dikey yarıçapların farklı olduğu eliptik köşeleri etkinleştirir. border-radius: 50px / 25px, dikeyden daha yatay kavisli köşeler yaratır ve esnetilmiş, oval bir etki üretir. Tam sekiz değerli sözdizimi şudur: border-radius: TL-h TR-h BR-h BL-h / TL-v TR-v BR-v BL-v; burada h yatay yarıçap ve v dikey yarıçaptır. Bu kontrol seviyesi, aksi takdirde elde edilmesi zor olan organik, leke benzeri (blob) şekiller yaratmanıza olanak tanır. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% gibi bir değer, modern web tasarımında sıklıkla dekoratif lekeler, avatar arka planları ve bölüm ayırıcılar için kullanılan asimetrik, doğal görünümlü bir şekil üretir. border-radius'ın arkasındaki geometriyi anlamak, görsel sonuçları tahmin etmeye yardımcı olur. Öğenin her köşesi, içine oturtulmuş bir elips (veya her iki yarıçap eşitse çember) alır. Kenarlık, arka plan ve içeriklerin tümü bu yuvarlatılmış dikdörtgene kırpılır. Her köşenin elipsi, yatay yarıçapı (üst veya alt kenar boyunca uzanan) ve dikey yarıçapı (sol veya sağ kenar boyunca uzanan) ile tanımlanır. Her iki yarıçap eşit olduğunda köşe dairesel bir yaydır. Farklı olduğunda köşe eliptik bir yaydır. Bu elipsi görselleştirmek, belirli değer kombinasyonlarının neden beklenmeyen şekiller ürettiğini anlamanıza yardımcı olur. Mükemmel bir daire oluşturmak iki koşul gerektirir: öğe kare olmalıdır (eşit genişlik ve yükseklik) ve border-radius %50 veya öğenin boyutunun yarısı kadar bir değer olmalıdır. Öğe kare değilse, border-radius: 50% bir elips yaratır. Profil resimleri ve avatarlar için, kapsayıcının eşit genişlik ve yükseklik değerleri kullanarak kare olduğundan emin olun veya CSS'te aspect-ratio: 1 kullanın, ardından border-radius: 50% uygulayın. Kapsayıcı üzerindeki overflow: hidden, görüntüyü dairesel şekle kırpar. Alternatif, aynı görsel sonucu üreten clip-path: circle(50%) kullanmaktır. Hap (pill) şekilleri (stadyum şekilleri), tamamen yuvarlatılmış kısa kenarlara sahip dikdörtgenlerdir. Öğenin yüksekliğinin yarısı kadar veya daha büyük bir değere sahip border-radius uygulayın. 40px yüksekliğinde bir düğme için border-radius: 20px uçları yarım dairelere yuvarlar. border-radius: 9999px gibi çok büyük bir değer kullanmak, tarayıcı yarıçapı en küçük boyutun yarısında sınırlandırdığından öğenin yüksekliğinden bağımsız olarak bir hap şekli garanti eder. Bu teknik modern arayüz tasarımında etiketler, rozetler, düğmeler ve giriş alanları için yaygındır. Hap şekli Apple'ın Human Interface Guidelines dahil birçok tasarım sisteminde varsayılan düğme stili haline gelmiştir. border-radius, oluşturulan sonucu etkileyen şekillerde diğer birçok CSS özelliğiyle etkileşime girer. Kenarlığın kendisi etkilenir: kenarlık çizgisi, eğri boyunca genişliğini koruyarak yuvarlatılmış köşeyi izler. Outline, çoğu tarayıcıda border-radius'ı izlemez ve öğe yuvarlatılmış köşelere sahip olsa bile bir dikdörtgen olarak oluşturulur (yine de Firefox ve daha yeni Chromium sürümleri artık yuvarlatılmış outline'ları desteklemektedir). Box-shadow, border-radius'ı izler ve öğe şekline uyan yuvarlatılmış gölgeler oluşturur. Overflow: hidden, alt içeriği yuvarlatılmış şekle kırpar; bu, yuvarlatılmış kapsayıcılardaki görüntüler için önemlidir. Background-clip, arka planın yuvarlatılmış alana kenarlığın altına uzanıp uzanmadığını belirler. border-radius oluşturma algoritması, bitişik yarıçapların toplamı kullanılabilir alanı aştığında çakışmaları çözer. Yalnızca 150px genişliğinde bir öğede border-top-left-radius: 100px ve border-top-right-radius: 100px ayarlarsanız, iki yarıçap 200px'e toplam olur ancak yalnızca 150px kullanılabilir. Tarayıcı sığması için her iki yarıçapı orantılı olarak azaltır. Spesifik olarak, bir ölçekleme faktörü (150/200 = 0.75) hesaplar ve her iki yarıçapa uygular ve her birinde 75px elde eder. Bu otomatik ayarlama, taşma konusunda endişelenmeden büyük yarıçap değerleri kullanabileceğiniz anlamına gelir, ancak görsel sonuç niyetinizden farklı olabilir. Algoritma, dört köşeyi aynı anda dikkate alır ve gereken en küçük ölçekleme faktörünü bulur. İç içe border-radius, tutarlı görsel aralığı korumak için iç öğelerin ebeveynlerinden daha küçük yarıçaplara sahip olmasını gerektirir. Bir kart border-radius: 16px ve padding: 8px içeriyorsa, iç içerik alanı border-radius: 8px (ebeveyn yarıçapı eksi padding) olmalıdır. Formül şudur: iç yarıçap = dış yarıçap - öğeler arası boşluk. Boşluk dış yarıçaptan büyükse, iç yarıçap 0 olmalıdır (yuvarlatma yok). Bu ilke görüntüler içeren kartlar, iç içe kapsayıcılar ve her ikisinin de yuvarlatılmış köşeleri olduğu her ebeveyn-çocuk ilişkisi için geçerlidir. Bu kuralı görmezden gelmek, nedenini hemen tanımlayamasanız bile görsel olarak yanlış görünen köşelerde tutarsız boşluk genişlikleri yaratır. CSS şekilleri ve border-radius bazen karıştırılan farklı amaçlara hizmet eder. border-radius, bir öğenin görsel köşelerini ve tıklama alanını yuvarlatır. CSS clip-path, kırpma yoluyla rastgele şekiller yaratır (circle(), ellipse(), polygon(), path()). Basit yuvarlatılmış dikdörtgenler için border-radius daha performanslı ve bakımı daha kolaydır. Karmaşık şekiller (üçgenler, altıgenler, özel çokgenler) için clip-path gereklidir. border-radius GPU'da birleştirilir ve CSS'teki en ucuz görsel efektlerden biridir. Karmaşık çokgenlerle clip-path daha pahalı olabilir. shape-outside özelliği, yuvarlatılmış öğelerin etrafına metin sarma için border-radius kullanır ve dergi tarzı düzenler yaratır. border-radius'ın performansı genellikle mükemmeldir. Yuvarlatılmış köşeler, tüm modern tarayıcılarda GPU birleştiricisi tarafından oluşturulur ve animasyonlar sırasında düzen yeniden hesaplaması veya yeniden boyamayı tetiklemez. border-radius'ın kendisini canlandırmak da, tarayıcı değerleri ara değerler olarak hesaplayabildiği ve sonucu GPU'da birleştirebildiği için performanslıdır. Bu, border-radius'ı hover efektleri (kare köşelerden yuvarlatılmış köşelere geçiş) ve animasyonlu öğeler için uygun hale getirir. Tek performans değerlendirmesi, her yuvarlatılmış gölge ek birleştirme çalışması gerektirdiğinden, border-radius'ın birçok öğede box-shadow ile birleştirilmesidir. border-radius için tarayıcı desteği, önekler olmadan tüm modern tarayıcılarda evrenseldir. -webkit-border-radius ve -moz-border-radius önekleri yaklaşık 2012'den beri gerekli değildir. Tek sınır durumları, IE9'dan beri her yerde desteklenen eliptik köşeler için eğik çizgi sözdizimini içerir. Aşırı eski tarayıcıları (IE8) destekliyorsanız, border-radius zarif şekilde bozulur: öğe basitçe kare köşelerle oluşturulur. Hiçbir işlevsellik kaybolmaz, yalnızca görsel yuvarlatma. border-radius içeren tasarım eğilimleri uçlar arasında döngüseldir. 2010'ların başları hafif 3px ila 5px yuvarlatmayı tercih ediyordu. 2010'ların ortaları düz tasarımda keskin 0px köşelere geri döndü. 2010'ların sonları material tasarım ve iOS etkili arayüzlerde 8px ila 16px yarıçaplarla yumuşak yuvarlatmayı geri getirdi. 2020'lerin başları 20px+ yarıçapları ve asimetrik leke (blob) şekilleriyle süper yuvarlatılmış tasarımları tanıttı. Mevcut eğilimler arayüz bileşenleri için orta ölçekli yuvarlatmayı (8px ila 16px) ve kartlar ile kapsayıcılar için daha büyük yuvarlatmayı (24px+) tercih ederek yumuşak, yaklaşılabilir bir his yaratmaktadır. Apple'ın uygulama simgeleri için kullandığı squircle (süperelips) şekli popülerlik kazanmıştır ancak border-radius standart bir dairesel yay, süperelips değil, ürettiğinden clip-path veya SVG gerektirir. Bir tasarım sistemi genelinde tutarlı border-radius değerleri görsel bütünlük yaratır. Bir yarıçap belirteci ölçeği tanımlayın: --radius-sm: 4px, --radius-md: 8px, --radius-lg: 16px, --radius-xl: 24px, --radius-full: 9999px. Bu belirteçleri tutarlı şekilde uygulayın: düğmeler --radius-md kullanır, kartlar --radius-lg kullanır, avatarlar --radius-full kullanır, küçük rozetler --radius-sm kullanır. Bu sistematik yaklaşım, tasarımları cilasız hissettiren rastgele yarıçap değerlerinin (burada 6px, şurada 10px, başka yerde 14px) görsel tutarsızlığını önler. Birçok CSS çerçevesi (Tailwind, Chakra UI) bu nedenle önceden tanımlanmış yarıçap ölçekleri içerir. Duyarlı border-radius, clamp(), min() veya medya sorguları kullanılarak elde edilebilir. border-radius: clamp(8px, 2vw, 24px) içeren bir kart, küçük ekranlarda daha küçük yuvarlatmaya ve geniş ekranlarda daha büyük yuvarlatmaya sahiptir. Bu, büyük yarıçapların mobilde küçük öğelerde baskın olmasını önler. Alternatif olarak, mobil kesme noktalarında border-radius'ı azaltın: masaüstünde border-radius: 24px, tablette 12px, mobilde 8px. Ekran kenarlarına değen tam genişlikte mobil kartlar için, küçük ekranlarda border-radius'ı tamamen kaldırmak (mobil kesme noktasında border-radius: 0) içerik alanını en üst düzeye çıkaran yaygın bir desendir. Görüntülerle border-radius, görüntüyü yuvarlatılmış şekle kırpmak için kapsayıcı üzerinde overflow: hidden gerektirir. overflow: hidden olmadan, görüntü yuvarlatılmış köşelerin ötesine uzanır ve yuvarlatma yalnızca kapsayıcı arka planında görünür. Alternatif bir yaklaşım, görüntünün kendisini yuvarlatılmış bir öğede background-image olarak kullanmaktır. <img> öğeleri için object-fit özelliği, görüntünün yuvarlatılmış kapsayıcıyı nasıl doldurduğunu kontrol eder: object-fit: cover tüm alanı doldurur (gerektiği gibi kırpar), object-fit: contain ise tüm görüntüyü içine sığdırır (olasılıkla boşluklar bırakır). Her iki yaklaşım da çalışır, ancak alt <img> içeren bir kapsayıcıda overflow: hidden daha yaygındır çünkü img öğesini erişilebilirlik (alt metni) ve SEO için korur. Gelişmiş şekil oluşturma, görüntüler veya SVG olmadan karmaşık biçimler yaratmak için border-radius'ı diğer CSS özellikleriyle birleştirir. Bir yumurta şekli asimetrik dikey yarıçaplar kullanır: border-radius: 50% / 60% 60% 40% 40%. Bir yaprak şekli zıt köşe yuvarlatması kullanır: border-radius: 0 50% 0 50%. Bir damla şekli, üç köşede border-radius'ı keskin bir dördüncü köşeyle birleştirir. Bir konuşma balonu, kuyruk için bir pseudo-element (::before veya ::after) ile ana şekilde border-radius kullanır. Bu yalnız-CSS şekilleri, basit dekoratif öğeler için SVG veya görüntü ihtiyacını ortadan kaldırır, HTTP isteklerini azaltır ve CSS özel özellikleri aracılığıyla kolay renk temalandırmasını sağlar. border-radius ve metin içeriği belirli şekillerde etkileşime girer. Yuvarlatılmış bir öğenin içindeki metin eğriyi izlemez. Metin dikdörtgen içerik kutusunda düzenlenir ve yuvarlatılmış köşeler yalnızca arka planı ve kenarlığı kırpar. Küçük yarıçap değerleri için bu fark edilmez. Büyük yarıçap değerleri için köşelere yakın metin, yuvarlatılmış arka plan içerik kenarından geri çekildiğinden ek padding'e sahipmiş gibi görünebilir. Bu, büyük border-radius değerlerine sahip öğelerin genellikle kare karşılıklarından daha fazla padding'e ihtiyaç duymasının nedenlerinden biridir. Bir düğmede border-radius: 24px ayarlarsanız, metnin eğri kenarı görsel olarak kalabalıklaştırmaması için padding yanlarda en az 12px ila 16px olmalıdır. Durumlar arasında border-radius'ı canlandırmak pürüzsüz şekil geçişleri yaratır. Kare bir öğede border-radius: 0'dan border-radius: 50%'ye geçiş onu bir kareden bir daireye dönüştürür. Bu etki yükleme göstergeleri, hover efektleri ve ortaya çıkarma animasyonları için popülerdir. CSS transition: border-radius 0.4s ease ara değer hesaplamasını yönetir. Daha karmaşık şekil değiştirme için (eğik çizgi sözdizimi kullanarak farklı asimetrik şekiller arasında geçiş), CSS geçişleri sekiz değerin her birini bağımsız olarak ara değerler ve pürüzsüz ara şekiller üretir. Yazdırma stil sayfaları ve border-radius, kullanıcıların yazdırabileceği web uygulamaları için değerlendirmeyi hak eder. Çoğu modern tarayıcı border-radius'ı yazdırmada oluşturur, ancak bazı eski sürümler oluşturmaz. Tasarımınız yalnızca dekorasyon için değil anlam için yuvarlatılmış köşelere bağlıysa, yazdırma çıktısını test edin. Faturalar, makbuzlar ve diğer yazdırılabilir belgeler için yuvarlatılmış köşeler dekoratiftir ve yazdırmada yoklukları kullanılabilirliği etkilemez. CSS çerçeveleri ve bileşen kitaplıklarında border-radius, belirteç tabanlı bir yaklaşıma standardize edilmiştir. Tailwind CSS, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl ve rounded-full gibi sınıflar kullanır. Bootstrap, rounded, rounded-circle, rounded-pill ve rounded-0 ile rounded-5 arasını kullanır. Chakra UI, adlandırılmış boyutlarla (sm, md, lg, xl, full) borderRadius kullanır. Bu çerçevelerin border-radius'ı nasıl uyguladığını anlamak, sistemler arasında geçiş yapmanıza ve varsayılanları tasarım gereksinimlerinize uyacak şekilde özelleştirmenize yardımcı olur. Squircle'lar (süperelipsler), yuvarlatılmış bir dikdörtgene benzeyen ama farklı bir matematiksel eğriye sahip olan şekillerdir. Apple, iOS uygulama simgeleri için squircle kullanır. Bir squircle, düz kenardan eğriye geçişte daha kademeli eğriliğe sahiptir ve standart bir border-radius çember yayından daha yumuşak bir görünüm üretir. CSS border-radius, dairesel veya eliptik yaylar kullandığından gerçek bir squircle üretilemez. CSS'te bir squircle oluşturmak için bir path() fonksiyonuyla clip-path veya bir SVG maskesi gerekir. border-radius ile yuvarlatılmış bir dikdörtgen ile squircle arasındaki görsel fark küçük boyutlarda incedir ancak özellikle 20px'in üzerindeki köşe yarıçaplarında daha büyük boyutlarda fark edilir. Kapsayıcı sorguları (container queries) ve border-radius, gerçekten duyarlı bileşen tasarımı için birlikte çalışabilir. CSS kapsayıcı sorgularıyla (@container), border-radius'ı görüntü alanı boyutuna göre değil kapsayıcı boyutuna göre değiştirebilirsiniz. Geniş bir kapsayıcıda border-radius: 24px olan bir kart bileşeni, genel sayfa genişliğinden bağımsız olarak dar bir kenar çubuğuna yerleştirildiğinde border-radius: 12px'ye geçebilir. Bu bileşen düzeyindeki duyarlılık, yalnızca görüntü alanı tabanlı medya sorgularından daha tutarlı görsel sonuçlar üretir. Tablo öğelerinde border-radius özel işlem gerektirir. Varsayılan olarak, bir <table> öğesinde border-radius, bireysel hücrelerin köşelerini yuvarlatmaz. Yuvarlatılmış dış köşelere sahip bir tablo oluşturmak için tabloda border-collapse: separate (collapse değil) ayarlayın, table öğesine border-radius uygulayın ve overflow: hidden ile taşmayı gizleyin. Bireysel yuvarlatılmış hücreler için belirli <td> veya <th> öğelerine border-radius uygulayın. border-top-left-radius ilk satırın ilk hücresine, border-top-right-radius ilk satırın son hücresine vb. gider. Bu hücre başına yaklaşım ayrıntılıdır ama hassas kontrol sağlar. Geçiş zamanlama fonksiyonları border-radius animasyonlarının nasıl hissettirdüğünü etkiler. Doğrusal (linear) bir geçiş mekanik, robotik yuvarlatma üretir. Bir ease geçişi hızlı başlar, ortada yavaşlar ve sonda hızlanır ve doğal bir his üretir. Bir ease-in-out geçişi pürüzsüz ivmelenme ve yavaşlama yaratır. Eğlenceli arayüzler için cubic-bezier fonksiyonları esnek veya yaylı yarıçap değişimleri yaratılabilir: transition: border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) yerleşmeden önce hedef değeri aşar. Zamanlama fonksiyonunu arayüzünüzün genel animasyon stiline göre eşleştirin. CSS Houdini ve Paint API, mevcut spesifikasyonun sunduğunun ötesinde border-radius için gelecek olasılıklar açar. Houdini ile istediğiniz herhangi bir köşe şeklini çizen özel boyama iş parçacıkları (worklet) oluşturabilirsiniz: squircle'lar, kabuklu kenarlar, dalgalı kenarlıklar ve standart border-radius'ın üretemeyeceği diğer biçimler. Houdini desteği hala sınırlı olsa da (öncelikle Chromium tarayıcılar), özel CSS şekillerinin geleceğini temsil eder. Bu arada, SVG clip-path'leri ve maskeleri standart olmayan köşe şekilleri için tarayıcılar arası alternatifler sağlar. Ekran çözünürlükleri ve piksel yoğunlukları arasında border-radius'ı test etmek önemlidir çünkü kavisli kenarların oluşturulması standart (1x), Retina (2x) ve daha yüksek yoğunluklu ekranlar arasında farklılık gösterir. 1x ekranda, yuvarlatılmış bir köşede 1px kenarlık pürüzlü görünebilir. 2x ekranda, aynı köşe, eğriyi temsil etmek için daha fazla fiziksel piksel bulunduğundan pürüzsüz oluşturulur. Hedef kitleniz düşük yoğunluklu ekranlardaki kullanıcıları içeriyorsa, yuvarlatılmış köşelerinizin 1x çözünürlükte kabul edilebilir göründüğünü test edin. Eğri daha kademeli olduğundan daha büyük yarıçap değerleri tüm yoğunluklarda daha pürüzsüz oluşturulur. border-radius üreteci aracı, her köşenin yatay ve dikey yarıçapını görsel olarak bağımsız olarak ayarlamanıza, sonucu gerçek zamanlı önizlemenize ve CSS'i kopyalamanıza olanak tanır. Bu, özellikle sekiz değer ile görsel çıktı arasındaki ilişkinin sezgisel olmadığı eğik çizgi sözdizimi için koddaki değerleri tahmin etmekten daha hızlıdır. Üreteci asimetrik şekilleri keşfetmek, tasarım niyetinizle tam olarak eşleşen değerleri bulmak ve ardından bu değerleri stil sayfanızda uygulamak için kullanın.
Sık sorulan sorular
Her köşe için farklı değer ayarlayabilir miyim?
Evet, dört köşenin tümünü bağımsız olarak kontrol edebilirsiniz: sol-üst, sağ-üst, sağ-alt ve sol-alt.
Hangi birimler kullanılıyor?
Araç varsayılan olarak piksel (px) kullanır; bunu CSS çıktısında gerektiği gibi değiştirebilirsiniz.
