CSS border, border-radius, box-shadow ve outline

border kısayolu ve kenarlık stilleri

border kalınlık, stil ve renk bileşenlerinden birini, ikisini ya da üçünü herhangi bir sırada alır ve dört kenara aynı kenarlığı uygular. Yazılmayan bileşen başlangıç değerine döner. Bunların içinde en kritik olanı stildir: Başlangıç değeri none olduğu için stil yazılmazsa kenarlık görünmez. MDN, border-style sayfasında bunun bir adım ötesini de açıklar: none veya hidden stilinde, arka plan görseli yoksa, o kenarın border-width değeri ne yazılırsa yazılsın kullanılan değer sıfırdır.

border-style da margin gibi bir ile dört değer alır: Tek değer dört kenara, iki değer önce üst ve alt sonra sol ve sağa, üç değer üst, sol ve sağ, alt sırasıyla, dört değer ise üstten başlayıp saat yönünde uygulanır. border-width ve border-color için de aynı dağılım geçerlidir.

.kart {
  border: 2px solid #333;
  /* dört kenar: 2px düz koyu gri */
}

.gorunmez {
  border: 4px red;
  /* stil yok: none kalır, kullanılan kalınlık 0 olur */
}

.karisik {
  border-width: 3px;
  border-style: hidden double dashed;
  /* üst: hidden | sol ve sağ: double | alt: dashed */
  border-color: teal;
}

.alt-cizgi {
  border-bottom: 1px dotted currentColor;
  /* yalnızca alt kenar, metin renginde */
}

border-color yazılmadığında kenarlık currentColor, yani metin rengini alır. Kenarlığı metinle aynı renkte tutmak istiyorsanız rengi ayrıca yazmanıza gerek yoktur. Renk yazımları için CSS renk değerleri yazısına bakabilirsiniz.

border-radius: köşeleri yuvarlatmak

border-radius, kutunun dış kenarlık kenarının köşelerini yuvarlatır. Tek bir yarıçap dairesel, iki yarıçap eliptik köşe verir. Değerler <length> veya <percentage> olabilir; negatif değerler geçersizdir. Bir ile dört değer arasındaki dağılım margin'den farklıdır, çünkü burada kenarlar değil köşeler sayılır ve sıra sol üst köşeden başlayıp saat yönünde ilerler.

İki değerli yazımda ilk değer sol üst ve sağ alt köşeye, ikinci değer sağ üst ve sol alt köşeye gider; yani karşılıklı köşeler eşleşir. Üç değerli yazımda ortadaki değer sağ üst ve sol alt köşeyi birlikte belirler.

Yüzdeler de yön bağımlıdır: Yatay eksendeki yüzde kutunun genişliğine, dikey eksendeki yüzde kutunun yüksekliğine göre hesaplanır. Bunun sonucu sık kullanılan bir desendir. Kare bir kutuya border-radius: 50% verdiğinizde her köşenin yatay ve dikey yarıçapı kenar uzunluğunun yarısı olur ve kutu daireye döner. Dikdörtgen bir kutuda aynı değer iki farklı yarıçap üretir ve sonuç elips olur.

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* yatay yarıçap 120 x 0,5 = 60px, dikey yarıçap 60px: daire */
}

.hap {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  /* yatay 200 x 0,5 = 100px, dikey 100 x 0,5 = 50px: elips */
}

Eğik çizgiyle eliptik köşeler

Her köşeye ayrı bir yatay ve dikey yarıçap vermek için değerleri / ile ikiye ayırırsınız. Eğik çizgiden önceki bir ile dört değer yatay yarıçapları, sonraki bir ile dört değer dikey yarıçapları aynı köşe sırasıyla belirler. MDN iki açılımı şöyle verir:

.a {
  border-radius: 1em / 5em;
}
/* eşdeğeri:
   border-top-left-radius: 1em 5em;
   border-top-right-radius: 1em 5em;
   border-bottom-right-radius: 1em 5em;
   border-bottom-left-radius: 1em 5em; */

.b {
  border-radius: 4px 3px 6px / 2px 4px;
}
/* yatay: sol üst 4px | sağ üst ve sol alt 3px | sağ alt 6px
   dikey: sol üst ve sağ alt 2px | sağ üst ve sol alt 4px
   eşdeğeri:
   border-top-left-radius: 4px 2px;
   border-top-right-radius: 3px 4px;
   border-bottom-right-radius: 6px 2px;
   border-bottom-left-radius: 3px 4px; */

İkinci örnekte iki listenin dağılımı birbirinden bağımsızdır: Yatay liste üç değerli yazım kuralına, dikey liste iki değerli yazım kuralına göre açılır, sonra her köşe kendi yatay ve dikey değerini eşleştirir. Tek bir köşeyi değiştirmek istediğinizde border-top-left-radius gibi uzun özellikleri kullanmak daha okunaklıdır.

MDN üç ayrıntıyı daha not eder. Yarıçap, öğenin kenarlığı olmasa bile arka planın tamamına uygulanır; kırpmanın tam olarak nerede yapılacağını background-clip belirler. border-collapse: collapse verilmiş tablo öğelerinde border-radius uygulanmaz. Son olarak, her kısayolda olduğu gibi tek tek alt değerlere kalıtım verilemez; border-radius: 0 0 inherit inherit geçerli değildir, bunun yerine ilgili uzun özellikleri kullanmanız gerekir.

corner-shape: köşenin biçimini değiştirmek

MDN'de border-radius ile birlikte çalışan corner-shape adlı bir kısayol da belgelenmiştir. Bu özellik yuvarlatılmış köşenin biçimini değiştirir: round (varsayılan, düz border-radius görünümü), square, bevel (yarıçapın iki ucu arasında düz kesik), notch, scoop, squircle anahtar kelimeleri ya da superellipse() fonksiyonu kullanılabilir. Değerlerin köşelere dağılımı border-radius ile aynıdır. border-radius uygulanmamışsa ya da sıfıra çözülüyorsa corner-shape etkisizdir. MDN'ye göre kenarlık, outline, gölge ve arka plan da tanımlanan köşe biçimini izler.

.etiket {
  border-radius: 12px;
  corner-shape: bevel;
  /* köşeler yuvarlak yerine düz kesik görünür */
}

box-shadow: değerlerin sırası

box-shadow bir gölgeyi iki ile dört uzunluk, isteğe bağlı inset anahtar kelimesi ve isteğe bağlı bir renkle tanımlar. Uzunlukların anlamı sayılarına göre belirlenir:

• İki uzunluk: yatay öteleme (offset-x) ve dikey öteleme (offset-y). Negatif yatay öteleme gölgeyi sola, negatif dikey öteleme yukarı taşır. İkisi de sıfırsa gölge öğenin tam arkasında kalır ve ancak bulanıklık ya da yayılma verilirse görünür.
• Üçüncü uzunluk: bulanıklık yarıçapı (blur-radius). Değer büyüdükçe gölge büyür ve açılır. Negatif olamaz; verilmezse 0'dır ve gölgenin kenarı keskin olur.
• Dördüncü uzunluk: yayılma yarıçapı (spread-radius). Pozitif değer gölgeyi büyütür, negatif değer küçültür; verilmezse 0'dır ve gölge öğeyle aynı boyuttadır.
• Renk: Yazılmazsa MDN'ye göre color özelliğinden gelen değer kullanılır.

.yumusak {
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
  /* x: 2px | y: 2px | bulanıklık: 2px | yayılma: 1px | yüzde 20 siyah */
}

.keskin {
  box-shadow: 10px 5px black;
  /* bulanıklık yok: kenarı keskin gölge, sağa ve aşağı kaymış */
}

.hale {
  box-shadow: 0 0 0 4px gold;
  /* öteleme ve bulanıklık yok, yalnızca 4px yayılma: kutunun çevresinde düz bir halka */
}

.yukari {
  box-shadow: 0 -6px 8px rgb(0 0 0 / 30%);
  /* negatif y: gölge üst tarafa düşer */
}

Üçüncü örnek pratik bir kalıptır: Öteleme ve bulanıklık sıfır, yayılma pozitif olduğunda gölge kutunun çevresinde kenarlık gibi görünen düz bir halkaya dönüşür. MDN, öğede border-radius varsa gölgenin de aynı yuvarlak köşeleri aldığını belirtir; bu yüzden halka köşelerle uyumlu kalır.

İç gölge ve çoklu gölgeler

inset anahtar kelimesi gölgeyi dışarıdan içeriye çevirir; içerik kutunun içine bastırılmış gibi görünür. MDN'ye göre iç gölgeler öğenin padding kutusuna kırpılır, arka planın üstünde ama içeriğin altında çizilir. Birden fazla gölge virgülle ayrılarak verilir ve listedeki ilk gölge en üstte görünür. Bu sıralama metin gölgesindeki (text-shadow) ile aynıdır.

.basili {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%);
  /* üst kenarda içe doğru gölge: basılmış buton görünümü */
}

.katmanli {
  box-shadow:
    3px 3px red inset,
    -1em 0 0.4em olive;
  /* ilk gölge (kırmızı, iç) üstte; ikincisi (zeytin, dış) solda */
}

Gölgeleri canlandırmak

box-shadow geçiş ve animasyonlarda ara değerleri hesaplanabilen bir özelliktir. MDN'ye göre her gölgenin rengi bir renk olarak, öteleme, bulanıklık ve yayılma değerleri uzunluk olarak enterpole edilir. Listeler sırayla eşleştirilir; uzunlukları farklıysa kısa liste, rengi transparent ve uzunlukları sıfır olan gölgelerle tamamlanır. Ancak eşleşen herhangi bir çiftte biri inset diğeri değilse listenin tamamı enterpole edilmez ve gölge animasyonsuz biçimde yeni değere atlar.

.kart {
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  transition: box-shadow 0.2s;
}

.kart:hover {
  box-shadow: 0 8px 16px rgb(0 0 0 / 25%);
  /* iki gölge de dış gölge: yumuşak geçiş olur */
}

.kart.hatali:hover {
  box-shadow: inset 0 8px 16px rgb(0 0 0 / 25%);
  /* biri inset, diğeri değil: geçiş olmadan anında değişir */
}

transition özelliğinin kendisi ve süre, zamanlama fonksiyonu gibi ayrıntılar CSS transition yazısında anlatılıyor. Görsel efektler için gölge yerine filtre kullanmak isterseniz filter yazısındaki drop-shadow() fonksiyonuna bakabilirsiniz.

outline ile border arasındaki fark

outline kısayolu da kalınlık, stil ve renk alır ve değerlerin sırası önemsizdir. Yazılmayan bileşen başlangıç değerine döner: kalınlık medium, stil none. Kenarlıkta olduğu gibi stil verilmezse outline çoğu öğede görünmez; MDN, tarayıcıların varsayılan stil verdiği input öğelerini istisna olarak anar.

Asıl fark düzendedir. MDN'ye göre outline kenarlığın dışına çizilen bir çizgidir ve kutunun diğer alanlarından farklı olarak yer kaplamaz; belgenin düzenini hiçbir şekilde etkilemez. Kenarlık ise kutunun bir parçasıdır ve boyutuna eklenir. Bu yüzden üzerine gelindiğinde ya da odaklanıldığında beliren bir vurgu için outline, düzenin parçası olan bir çerçeve için border uygundur. Outline'ın dikdörtgen olması da zorunlu değildir; çok satırlı metinde bazı tarayıcılar her satır kutusu için ayrı, bazıları bütün metin için tek bir outline çizer. Köşeler border-radius'u izler.

outline-offset öğe ile outline arasındaki boşluğu belirler. Pozitif değer outline'ı dışarı iter, sıfır onu kenarlığa bitişik çizer, negatif değer ise öğenin içine yerleştirir. MDN'ye göre aradaki boşluk saydamdır; yani ebeveynin arka planı görünür.

a:focus-visible {
  outline: 3px solid orange;
  outline-offset: 2px;
  /* bağlantının çevresinde 2px boşlukla turuncu halka, düzen kaymaz */
}

.ic-cerceve {
  outline: 2px dashed teal;
  outline-offset: -6px;
  /* negatif: outline öğenin içine çizilir */
}

Odak göstergesini kaldırmayın

MDN'nin outline sayfasındaki erişilebilirlik notu açıktır: outline değerine 0 veya none vermek tarayıcının varsayılan odak stilini kaldırır. Etkileşimli her öğenin görünür bir odak göstergesi olmalıdır; varsayılan stili kaldırıyorsanız yerine belirgin bir odak stili sağlamanız gerekir. Klavyeyle gezinen kullanıcılar için bu gösterge sayfada nerede olduklarını anlamanın tek yoludur. Odak durumlarını yalnızca klavye kullanımında göstermek için :focus-visible seçicisinden yararlanabilirsiniz; bu seçici pseudo-class yazısında anlatılıyor.

/* yanlış: odak göstergesini yok eder */
button:focus {
  outline: none;
}

/* doğru: varsayılanı kaldırıyorsanız yerine görünür bir stil koyun */
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Sık yapılan hatalar

• Stilsiz kenarlık: border: 2px red görünmez; solid gibi bir stil ekleyin.
• border-radius sırasını margin gibi okumak: Köşe sırası sol üstten başlar; iki değerde karşılıklı köşeler eşleşir.
• Dikdörtgende 50% ile daire beklemek: Yüzdeler genişlik ve yüksekliğe ayrı ayrı göre hesaplanır, sonuç elips olur. Daire için kutunun kare olması gerekir.
• box-shadow'da üçüncü değeri yayılma sanmak: Üçüncü uzunluk bulanıklık, dördüncüsü yayılmadır.
• inset olan ve olmayan gölge arasında geçiş beklemek: Liste enterpole edilmez, gölge anında değişir.
• Odak outline'ını yerine bir şey koymadan kaldırmak: Klavye kullanıcıları için ciddi bir erişilebilirlik sorunudur.
• Tabloda yuvarlak köşe beklemek: border-collapse: collapse olan tablo öğelerinde border-radius uygulanmaz.

Sık Sorulan Sorular

Kenarlık eklemek kutuyu büyütür mü?

Varsayılan box-sizing: content-box ayarında evet; kenarlık kalınlığı width değerine eklenir. box-sizing: border-box kullanırsanız kenarlık belirttiğiniz genişliğin içinde kalır. Outline ise iki durumda da yer kaplamaz.

Tam yuvarlak bir buton nasıl yapılır?

Genişlik ve yüksekliği eşit bir kutuya border-radius: 50% verin. Genişliği yüksekliğinden fazla bir kutuda aynı değer elips verir; uçları yarım daire olan hap biçimi için yüzde yerine yüksekliğin yarısına eşit sabit bir uzunluk kullanın, örneğin 40 piksel yüksekliğindeki bir butonda border-radius: 20px.

Gölge rengi yazmazsam ne olur?

MDN'ye göre renk yazılmadığında color özelliğinden gelen değer kullanılır. Gölgenin metinle aynı renkte olmasını istemiyorsanız rengi açıkça, tercihen yarı saydam bir değerle yazın.

outline yerine box-shadow ile odak halkası yapabilir miyim?

Yayılma değeriyle halka çizmek mümkündür ve köşeleri izler. Yine de MDN'nin erişilebilirlik notları odak için outline üzerinden anlatılır; hangi yöntemi seçerseniz seçin göstergenin açıkça görünür olduğunu kontrol edin.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · Kutu modeli · box-sizing ve border-box · background özellikleri · CSS transition · :hover, :focus ve diğer pseudo-class'lar