Çalıştırılabilir CSS Dokümanları: CSS border

Q: CSS'te yuvarlak köşeler nasıl yapılır?

border-radius kullan: border-radius: 8px; dört köşenin hepsini yuvarlar. Kare bir elementte border-radius: 50%; bir daire yapar, 999px gibi büyük bir değer ise hap şekli verir. Kenarlık olmasa bile arka planı da yuvarlar.

Q: Yalnızca tek bir kenara kenarlık nasıl eklenir?

Bir kenar özelliği kullan: border-bottom: 2px solid #e5e7eb; ya da metnin başladığı taraf için border-inline-start; bu, sağdan sola yazılan dillerde de çalışır.

Border kısa yazımı

border, bir elementin çevresine, padding'i ile margin'i arasına bir çizgi çizer. Kısa yazım herhangi bir sırada üç parça alır: bir kalınlık, bir stil ve bir renk.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Parça	Uzun yazım	Değerler	Varsayılan
Kalınlık	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Stil	`border-style`	`solid`, `dashed`, `dotted`, `double` ve daha fazlası	`none`
Renk	`border-color`	Herhangi bir renk	`currentColor` (metin rengi)

Atlayamayacağın tek parça stildir. Varsayılanı none olduğu için border: 2px #2563eb; hiçbir şey çizmez. Rengi yazmazsan kenarlık elementin metin rengini alır.

Kenarlık stilleri

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double'ın iki çizgi göstermesi için en az 3px gerekir. groove, ridge, inset ve outset rengi 3B görünecek şekilde gölgelendirir ve tarayıcılar arasında biraz farklı görünür. hidden, none gibi görünür; ikisi yalnızca kenarlıkları birleştirilmiş tabloların içinde farklıdır, bunu HTML tablo kenarlığı sayfası anlatıyor.

Her seferinde tek kenar

Her kenarın kendi kısa yazımı (border-top, border-right, border-bottom, border-left) ve her parçanın border-top-color gibi kenar başına uzun yazımları vardır. Mantıksal sürümler olan border-inline-start ve border-block-end yazı yönünü takip eder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width ve border-style, padding ile aynı saat yönü sırasında bir ila dört değer kabul eder: üst, sağ, alt, sol.

border-radius ile yuvarlak köşeler

border-radius kenarlığın ve arka planın köşelerini yuvarlar, bu yüzden hiç kenarlığı olmayan elementlerde de çalışır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Değer	Sonuç
`border-radius: 8px`	Bütün köşeler 8px yuvarlanır
`border-radius: 50%`	Kare bir elementte daire, dikdörtgende elips
`border-radius: 999px`	Hap şekli: kısa kenarlar tam yarım daire olur
`border-radius: 8px 0`	Sol üst ve sağ alt 8px, diğer ikisi köşeli
`border-top-left-radius: 12px`	Yalnızca tek köşe
`border-radius: 50% / 25%`	Eliptik köşeler: yatay yarıçap / dikey yarıçap

Arka planı olan bir çocuk, yuvarlatılmış bir ebeveynin köşelerinden taşabilir. Ebeveyne verilen overflow: hidden onu eğriye göre kırpar.

Border ve outline

Bir outline kenarlık gibi görünür ama onun dışına çizilir ve yer kaplamaz, bu yüzden eklemek hiçbir şeyi yerinden oynatmaz. Tarayıcıların odak halkaları için outline kullanmasının nedeni budur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Yer kaplar	Evet, kutu boyutunun parçası	Hayır
Kenar başına	Evet (`border-top`, ...)	Hayır, dört bir yanda
`border-radius`'u takip eder	Evet	Evet, güncel tarayıcılarda
Kutudan uzaklık	Hayır	Evet, `outline-offset`
Tipik kullanım	Tasarım	Odak göstergeleri, hata ayıklama

Sık yapılan hatalar

Kenarlık stili yok. border: 1px #111827; ve border-color: red; hiçbir şey çizmez. solid (ya da başka bir stil) ekle.
Hover'da düzeni zıplatan bir kenarlık. Alanı saydam bir kenarlıkla ayır ya da outline veya box-shadow kullan.
Kenarlığı genişlikte unutmak. Kenarlığı olan width: 100% bir element, content-box altında kapsayıcısından taşar. box-sizing: border-box kullan.
Köşelerden taşan bir çocukla border-radius. Yuvarlatılmış ebeveyne overflow: hidden ekle.
Odak çerçevelerini outline: none ile kaldırmak. Klavye kullanıcılarının onlara ihtiyacı var; silmek yerine outline'ı yeniden stillendir.

Sıkça Sorulan Sorular

CSS'te kenarlık nasıl eklenir?

Bir kalınlık, bir stil ve bir renk içeren kısa yazımı kullan: border: 2px solid #2563eb;. En önemli kısım stildir: stil olmadan kenarlık stili none olur ve hiçbir kenarlık çizilmez.

CSS kenarlığım neden görünmüyor?

Neredeyse her zaman kenarlık stili verilmediği için. Varsayılan border-style none olduğundan border: 2px #2563eb; ya da tek başına border-color: red; hiçbir şey çizmez. solid, dashed ya da başka bir stil ekle.

CSS'te yuvarlak köşeler nasıl yapılır?

border-radius kullan: border-radius: 8px; dört köşenin hepsini yuvarlar. Kare bir elementte border-radius: 50%; bir daire yapar, 999px gibi büyük bir değer ise hap şekli verir. Kenarlık olmasa bile arka planı da yuvarlar.

Yalnızca tek bir kenara kenarlık nasıl eklenir?

Bir kenar özelliği kullan: border-bottom: 2px solid #e5e7eb; ya da metnin başladığı taraf için border-inline-start; bu, sağdan sola yazılan dillerde de çalışır.

Border ile outline arasındaki fark nedir?

Border kutunun parçasıdır: yer kaplar ve elementin boyutunu değiştirir. Outline ise yer kaplamadan kenarlığın dışına çizilir, kenar başına ayarlanamaz ve tarayıcıların odak halkaları için kullandığı şeydir. Güncel tarayıcılarda ikisi de border-radius'u takip eder.

İlgili kavramlar