Tailwind CSS Border ve Rounded: Kenarlık, Renk ve Köşe Yuvarlama

border sınıfı tek başına neden çizgi çizer?

Tarayıcının varsayılanında bir öğeye yalnızca border-width vermek çizgi göstermez; çünkü border-style değeri none olarak kalır. Tailwind bu sorunu iki katmanda çözer. Birincisi Preflight adlı temel stillerdir: her öğe ve sözde öğe için border: 0 solid; yazar, yani genişliği sıfırlar ama stili baştan solid yapar. İkincisi, genişlik sınıflarının kendisi stili bir CSS değişkeninden okur. Aşağıdaki küçük kart örneğinde bunu görebilirsiniz.

<div class="rounded-lg border border-gray-200 p-4">Kart içeriği</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

Çıktının @layer theme bölümünde bu değişkenlerin değerleri de yer alır: --radius-lg: 0.5rem, --color-gray-200: oklch(92.8% 0.006 264.531) ve --spacing: 0.25rem. --tw-border-style ise @property ile initial-value: solid olarak tanımlanır. Dolayısıyla kendi başına border yazdığınızda düz, 1px'lik bir çizgi elde edersiniz. Kök yazı boyutu 16px olan bir sayfada 0.5rem 8px'e, p-4 ise 16px'e karşılık gelir.

Genişlik değerleri tema ölçeğinden değil, doğrudan sayıdan gelir: belgeye göre border-<sayı> sınıfı border-width: <sayı>px üretir. Bu yüzden border-3 ya da border-6 gibi listede görmediğiniz değerler de çalışır. Sayı yazmazsanız (border) değer 1px olur.

Yönlü kenarlıklar: t, r, b, l, x, y, s, e

Tek bir kenara çizgi koymak için border ile sayı arasına yön harfi eklenir. t üst, r sağ, b alt, l sol kenardır. x yatay iki kenarı (sol ve sağ), y dikey iki kenarı (üst ve alt) birlikte hedefler. s ve e ise mantıksal başlangıç ve bitiş kenarlarıdır: soldan sağa yazılan bir sayfada s sol kenara, sağdan sola (dir="rtl") bir sayfada sağ kenara denk gelir.

<div class="border-t-4 border-b border-x-2 border-s-4"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .border-x-2 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 2px;
  }
  .border-s-4 {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 4px;
  }
  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
}

Burada iki ayrıntıya dikkat edin. Birincisi, border-x-2 fiziksel border-left ve border-right yerine mantıksal border-inline-width özelliğini yazar; yatay yazımda sonuç sol ve sağ kenardır. İkincisi, sınıflar CSS dosyasında HTML'deki sırayla değil Tailwind'in kendi sıralamasıyla dizilir: border-x-2 ve border-s-4 aynı kenarı etkilediğinde hangisinin kazanacağı bu sıraya bağlıdır. Bu sıralama mantığını çakışan sınıflar yazısında ayrıca anlatıyoruz. Belgede ayrıca blok yönündeki başlangıç ve bitiş kenarları için border-bs-* ve border-be-* sınıfları da listelenir; bunlar yazım moduna göre üst ya da alt kenara eşlenir.

Kenarlık stili: solid, dashed, dotted, double

Stil sınıfları border-solid, border-dashed, border-dotted, border-double, border-hidden ve border-none adını taşır. Bunlar yalnızca stili değiştirir, genişlik vermez; görünür bir kesikli çizgi için bir genişlik sınıfıyla birlikte kullanmanız gerekir.

<div class="border-2 border-dashed"></div>
<div class="border-4 border-double border-t-8"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t-8 {
    border-top-style: var(--tw-border-style);
    border-top-width: 8px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-double {
    --tw-border-style: double;
    border-style: double;
  }
}

Stil sınıfı hem border-style özelliğini hem de --tw-border-style değişkenini ayarlar. Yönlü genişlik sınıfları stili bu değişkenden okuduğu için ikinci örnekteki border-t-8, kendisinden sonra gelen border-double sınıfının stilini de alır ve üst kenar da çift çizgi olur. Değişken olmasaydı border-t-8 üst kenarın stilini sabit bir değerle yazıp kesikli ya da çift görünümü bozabilirdi. Belgeye göre border-none en çok, küçük ekranda verilen bir kenarlığı daha büyük bir breakpoint'te kaldırmak için kullanılır.

Kenarlık rengi ve opaklık

Renk sınıfları palet adını izler: border-indigo-500, border-gray-200, border-black gibi. Tek bir kenarın rengini değiştirmek için yön harfi renkten önce gelir: border-t-indigo-500 yalnızca üst kenarın rengini ayarlar. Rengin sonuna /50 gibi bir değer eklemek opaklık verir.

<div class="border-4 border-indigo-200 border-t-indigo-500"></div>
<div class="border-2 border-indigo-500/50"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }
  .border-indigo-500\/50 {
    border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-indigo-500) 50%, transparent);
    }
  }
  .border-t-indigo-500 {
    border-top-color: var(--color-indigo-500);
  }
}

İlk öğede dört kenar açık indigo, üst kenar koyu indigo olur; çünkü border-t-indigo-500 yalnızca border-top-color yazar ve tüm kenarları ayarlayan border-indigo-200 sınıfından sonra sıralanır. Derlenen dosyadaki bu sıra, HTML'de sınıfları hangi sırayla yazdığınızdan bağımsızdır. İkinci öğedeki opaklık modifier'ı color-mix() ile yarı saydam bir renk üretir; @supports bloğu, tarayıcı oklab karışımını destekliyorsa tema değişkeniyle hesaplanan sürümü kullanır. Opaklık modifier'ının ayrıntıları renk opaklığı yazısında, paletin tamamı ise renk paleti yazısında anlatılıyor. Değerler @layer theme içinde --color-indigo-200: oklch(87% 0.065 274.039) ve --color-indigo-500: oklch(58.5% 0.233 277.117) olarak yer alır.

Köşe yuvarlama ölçeği: rounded-xs ile rounded-4xl arası

rounded-* sınıfları border-radius yazar ve değerlerini --radius-* tema değişkenlerinden alır. Aşağıdaki tablo, v4.3.5 tema dosyasındaki değerleri ve 16px kök yazı boyutunda piksel karşılıklarını gösteriyor.

<div class="rounded rounded-sm rounded-xs rounded-full rounded-none"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
}

Çıktıda iki şey dikkat çekiyor. Ek almayan rounded sınıfı hâlâ derlenir ve sabit 0.25rem yazar; bu, rounded-sm sınıfının değeriyle (--radius-sm: 0.25rem) aynıdır. Resmî yükseltme rehberi bu adların v4'te yeniden düzenlendiğini anlatır: v3'teki rounded-sm görünümü artık rounded-xs, v3'teki rounded görünümü artık rounded-sm adını taşır; eklerin olmadığı sürümler geriye uyumluluk için çalışmaya devam eder. Bazı Türkçe özetlerde rounded-sm için 0.125rem, rounded-full için 9999px yazdığını görebilirsiniz; v4.3.5 derlemesi rounded-sm için 0.25rem, rounded-full için calc(infinity * 1px) üretir. Resmî belge, hap biçimli butonlar için rounded-full sınıfını önerir.

v3'ten v4'e geçişte isim değişikliklerinin tam listesi için Tailwind v4 yenilikleri yazısına bakabilirsiniz.

Tek kenar ve tek köşe yuvarlama

Yön harfleri yuvarlamada da çalışır, ancak iki farklı düzey vardır. Tek harf (t, r, b, l) bir kenarın iki köşesini birden yuvarlar; iki harf (tl, tr, br, bl) yalnızca o köşeyi hedefler. Mantıksal karşılıklar s, e, ss, se, es ve ee harfleridir.

<img class="rounded-t-xl" src="kapak.jpg" alt="">
<div class="rounded-tl-lg rounded-br-lg"></div>
<div class="rounded-s-lg"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded-s-lg {
    border-start-start-radius: var(--radius-lg);
    border-end-start-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-tl-lg {
    border-top-left-radius: var(--radius-lg);
  }
  .rounded-br-lg {
    border-bottom-right-radius: var(--radius-lg);
  }
}

rounded-t-xl, kartın üstüne yerleştirilen bir kapak görselinde sık kullanılır: kartın kendisi rounded-xl ise görselin yalnızca üst köşelerini aynı değerle yuvarlamak kenarların hizalanmasını sağlar. Mantıksal sınıfların fiziksel karşılıkları yazım yönüne göre değişir; resmî belgedeki eşleme tablosu şöyledir:

Özel değerler ve tema değişkeni ekleme

Ölçekte olmayan bir değer gerektiğinde köşeli parantezle keyfi değer yazabilirsiniz: border-[3px] ya da rounded-[2vw]. Bir CSS değişkenini kullanmak için parantezli kısa yazım vardır: border-(--kenar-rengi), var() fonksiyonunu sizin yerinize ekler. Ölçeğe kalıcı bir değer eklemek isterseniz @theme içinde yeni bir --radius-* değişkeni tanımlarsınız.

@import "tailwindcss";

@theme {
  --radius-5xl: 3rem;
}

<div class="border-[3px] rounded-[2vw] rounded-5xl border-(--kenar-rengi)"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded-5xl {
    border-radius: var(--radius-5xl);
  }
  .rounded-\[2vw\] {
    border-radius: 2vw;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-\(--kenar-rengi\) {
    border-color: var(--kenar-rengi);
  }
}

border-(--kenar-rengi) sınıfının border-color ürettiğine dikkat edin: değişkenin türü belirtilmediğinde Tailwind onu renk olarak yorumlar. Bir değişkeni genişlik olarak kullanmak istiyorsanız belgede gösterildiği gibi tür ipucu eklemelisiniz: border-(length:--kenar-kalinligi). Köşeli parantez ve tür ipuçlarının genel kuralları arbitrary values yazısında, @theme ad alanları ise @theme direktifi yazısında anlatılıyor.

Çocuklar arasına çizgi: divide-x ve divide-y

Bir listenin öğeleri arasına çizgi çekmek için her öğeye ayrı kenarlık yazmak yerine kapsayıcıya divide-y ekleyebilirsiniz. Renk için divide-gray-200 gibi sınıflar, stil için divide-dashed gibi sınıflar vardır.

<ul class="divide-y divide-gray-200">
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
</ul>

v4.3.5 ile derlenen CSS:

@layer utilities {
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-gray-200 > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
}

Seçici, son öğe dışındaki tüm doğrudan çocuklara alt kenarlık verir. :where() içine alındığı için özgüllüğü sıfırdır; bir çocuğa kendi kenarlık sınıfını yazarsanız o kazanır. Öğeleri flex-col-reverse ile ters dizdiyseniz divide-y-reverse eklemeniz gerekir; bu sınıf --tw-divide-y-reverse değerini 1 yapar ve çizgiyi üst kenara taşır. divide ile space ve gap arasındaki seçim gap, space-x ve divide yazısında ayrıntılı olarak karşılaştırılıyor.

Durum ve ekran boyutuna göre kenarlık

Kenarlık ve köşe sınıfları diğer tüm Tailwind sınıfları gibi varyant alır. Bir input'un odaklandığında renk değiştirmesi ya da kartın büyük ekranda daha yuvarlak köşelere sahip olması tek satırla yazılabilir.

<div class="border-2 border-gray-300 md:border-t-4 hover:border-sky-500 focus:border-pink-600 rounded md:rounded-lg"></div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded {
    border-radius: 0.25rem;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  @media (hover: hover) {
    .hover\:border-sky-500:hover {
      border-color: var(--color-sky-500);
    }
  }
  .focus\:border-pink-600:focus {
    border-color: var(--color-pink-600);
  }
  @media (width >= 48rem) {
    .md\:rounded-lg {
      border-radius: var(--radius-lg);
    }
    .md\:border-t-4 {
      border-top-style: var(--tw-border-style);
      border-top-width: 4px;
    }
  }
}

hover: varyantı @media (hover: hover) içine yerleşir; yani yalnızca fareyle üzerine gelinebilen cihazlarda çalışır. md: varyantı @media (width >= 48rem) sorgusu üretir ve 16px kökte 768px ve üzerini kapsar. Bu iki konu hover, focus ve active durumları ile responsive tasarım yazılarında ele alınıyor.

Uygulamalı örnek: sol çizgili uyarı kutusu

Belgelerde ve yönetim panellerinde sık görülen bir kalıp, yalnızca sol kenarı kalın ve renkli, sağ köşeleri yuvarlak bir bilgi kutusudur. Sol köşeleri yuvarlamamak çizginin düz kalmasını sağlar.

<div class="rounded-r-lg border-l-4 border-amber-500 bg-amber-50 p-4">
  Yedek almadan önce güncelleme yapmayın.
</div>

v4.3.5 ile derlenen CSS:

@layer utilities {
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-amber-500 {
    border-color: var(--color-amber-500);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

border-amber-500 dört kenarın rengini ayarlar ama yalnızca sol kenarın genişliği sıfırdan büyük olduğu için görünen tek çizgi soldadır. Preflight'ın box-sizing: border-box kuralı sayesinde 4px'lik çizgi kutunun genişliğine eklenmez, verdiğiniz genişliğin içinde kalır. Bu kalıbı buton, input ve rozet örnekleriyle birlikte kart, buton ve input örnekleri yazısında bulabilirsiniz.

Sık yapılan hatalar

• Renk sınıfını unutmak: v4'te renk vermezseniz kenarlık currentColor olur. Gri bir ayırıcı beklerken metin renginde koyu bir çizgi görüyorsanız sebep budur.
• Olmayan bir sınıf adı yazmak: border-sm ya da Türkçe renk adıyla border-gri-200 yazdığınızda CLI hata vermez, yalnızca hiçbir CSS üretmez. Bu iki sınıfla yapılan derlemede @layer utilities bölümü boş kaldı.
• Aynı sınıfı @apply ile kullanmak: @apply içinde bilinmeyen bir sınıf derlemeyi durdurur. v4.3.5 şu mesajı verir: Error: Cannot apply unknown utility class `border-gri-200`. Ayrıntılar için @apply yazısına bakın.
• v3 adlarıyla v4 görünümü beklemek: v3 projesinden taşınan rounded-sm artık 0.25rem'dir, eskisi gibi ince görünmesini istiyorsanız rounded-xs kullanın.
• Odak göstergesini kenarlıkla yapmak: Kenarlık kalınlığını odakta artırmak öğenin içeriğini kaydırabilir. Odak halkaları için kutu boyutunu değiştirmeyen ring ya da outline sınıfları shadow ve ring yazısında anlatılıyor.

Sınıfınız hiç CSS üretmiyorsa sorunun kaynağını bulmak için Tailwind class çalışmıyor yazısındaki kontrol listesini izleyebilirsiniz.

Sık Sorulan Sorular

Tailwind'de border varsayılan olarak kaç piksel?

Sayı almayan border sınıfı border-width: 1px yazar. Sayılı sınıflarda sayı doğrudan piksel karşılığıdır: border-2 2px, border-8 8px. Bu değerler rem değil piksel olduğu için kök yazı boyutundan etkilenmez.

rounded ile rounded-sm arasında fark var mı?

v4.3.5 derlemesinde ikisi de 0.25rem üretir; rounded değeri sabit yazar, rounded-sm ise --radius-sm değişkenini kullanır. Temada --radius-sm değerini değiştirirseniz yalnızca rounded-sm etkilenir. Yeni kodda adı olan sürümü tercih etmek tutarlılık sağlar.

Yalnızca alt kenarlık nasıl eklenir?

border-b (1px) ya da border-b-2 gibi bir sınıf ve bir renk sınıfı yazın: border-b border-gray-200. Renk sınıfı tüm kenarları boyar ama diğer kenarların genişliği sıfır olduğu için yalnızca alt çizgi görünür.

Kenarlık kutunun boyutunu büyütür mü?

Tailwind kullanılan bir sayfada büyütmez, çünkü Preflight tüm öğelere box-sizing: border-box verir; verdiğiniz genişlik ve yükseklik kenarlığı da içerir. Preflight'ı kapattıysanız tarayıcı varsayılanı geçerli olur. Ayrıntılar Preflight yazısında anlatılıyor.

Kenarlık yerine ne zaman ring kullanmalıyım?

Ring, kenarlık değil box-shadow ile çizilen bir halkadır ve yerleşimi etkilemez. Odak durumunu göstermek ya da kenarlığın üstüne ikinci bir çizgi eklemek için uygundur. Kalıcı ve yerleşimin parçası olan çizgiler için kenarlık daha doğru seçimdir.

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: Tailwind öğrenme rehberi · Shadow ve ring · Renk opaklığı · Gap, space ve divide · Kart, buton, input örnekleri · Tailwind v4 yenilikleri