
Kenarlıık Genişliği (Tailwind CSS) : Bir öğenin sınırlarını genişliğini denetlemede yardımcı olan araçtır veya koddur.
Sınıf | Özellikleri |
---|---|
border-0 | border-width: 0px; |
border-2 | border-width: 2px; |
border-4 | border-width: 4px; |
border-8 | border-width: 8px; |
border | border-width: 1px; |
border-x-0 | border-left-width: 0px; border-right-width: 0px; |
border-x-2 | border-left-width: 2px; border-right-width: 2px; |
border-x-4 | border-left-width: 4px; border-right-width: 4px; |
border-x-8 | border-left-width: 8px; border-right-width: 8px; |
border-x | border-left-width: 1px; border-right-width: 1px; |
border-y-0 | border-top-width: 0px; border-bottom-width: 0px; |
border-y-2 | border-top-width: 2px; border-bottom-width: 2px; |
border-y-4 | border-top-width: 4px; border-bottom-width: 4px; |
border-y-8 | border-top-width: 8px; border-bottom-width: 8px; |
border-y | border-top-width: 1px; border-bottom-width: 1px; |
border-t-0 | border-top-width: 0px; |
border-t-2 | border-top-width: 2px; |
border-t-4 | border-top-width: 4px; |
border-t-8 | border-top-width: 8px; |
border-t | border-top-width: 1px; |
border-r-0 | border-right-width: 0px; |
border-r-2 | border-right-width: 2px; |
border-r-4 | border-right-width: 4px; |
border-r-8 | border-right-width: 8px; |
border-r | border-right-width: 1px; |
border-b-0 | border-bottom-width: 0px; |
border-b-2 | border-bottom-width: 2px; |
border-b-4 | border-bottom-width: 4px; |
border-b-8 | border-bottom-width: 8px; |
border-b | border-bottom-width: 1px; |
border-l-0 | border-left-width: 0px; |
border-l-2 | border-left-width: 2px; |
border-l-4 | border-left-width: 4px; |
border-l-8 | border-left-width: 8px; |
border-l | border-left-width: 1px; |
Temel Kullanım
her açıdan
Kullanılan border
, .border-0
, .border-2
, .border-4
, or .border-8
bir öğeye kenarlık belirlemek için kullanılan kod araçları bu şekildedir.

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>
Tek taraflı kalınlık oluşturmak için kodları
Kullanılan kodları şu şekildedir border-{side}
, .border-{side}-0
, .border-{side}-2
, .border-{side}-4
, or .border-{side}-8
bir öğede sadece bir tarafta kalınlık oluşturmak için oluşturan kod ve görünüm biçimleri.

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>
Yatay ve dikey olarak oluşturulan kenarlıklar.
Bir öğenin iki tarafında aynı anda kenarlık genişliği ayarlamak için border-{x|y}-{width}
bu kodu kullanın.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>
Kenar Elemanları Arasında
Ayrıca, bölme-{x/y}-{genişlik} ve bölme-{renk} yardımcı programlarını kullanarak alt öğeler arasına kenarlıklar da ekleyebilirsiniz.

<div class="divide-y divide-slate-200 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Genişlik renk bölümleri için başka bir kaynak için (ingilizce) Kenarlık – Renk