Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'te border özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

40 views

CSS'te border özelliği, HTML elementlerinin kenar çizgilerini stilize etmek için kullanılır. Bu özellik, kenar çizgilerinin kalınlığını, stilini ve rengini tanımlamanıza olanak tanır. border özelliği kısa bir şekilde tüm kenar çizgileri için ortak değerleri ayarlayabileceğiniz gibi, border-width, border-style, ve border-color özelliklerini ayrı ayrı da belirtebilirsiniz. Ayrıca, border-top, border-right, border-bottom, ve border-left özellikleri ile elementin sadece belirli kenarlarına kenar çizgisi ekleyebilir veya bu kenarları farklı şekillerde stilize edebilirsiniz.

 

.element {
  border: 2px solid black;
}

Bu örnekte, .element sınıfına sahip bir HTML elementine 2 piksel kalınlığında, katı (solid) ve siyah bir kenar çizgisi eklenir.

Kenar Çizgisi Özelliklerini Ayrı Ayrı Belirtme:

.element {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

 

Belirli Bir Kenara Kenar Çizgisi Ekleme

.element {
  border-top: 2px dashed red;
}

Bu örnekte, .element sınıfına sahip bir HTML elementinin üst kenarına 2 piksel kalınlığında, kesik çizgili (dashed) ve kırmızı bir kenar çizgisi eklenir.

border Özelliğinin Stilleri

border-style özelliği için kullanılabilecek değerler arasında none, solid, dashed, dotted, double, groove, ridge, inset ve outset bulunur. Bu stiller, kenar çizgilerinin görünümünü değiştirmek için kullanılır.

Renk ve Kalınlık

Kenar çizgilerinin rengi border-color ile, kalınlığı ise border-width ile belirlenir. Renkler için CSS tarafından kabul edilen herhangi bir renk formatı (isimler, heksadesimal kodlar, RGB, RGBA, HSL, HSLA vb.) kullanılabilir. Kalınlık için ise genellikle piksel (px), em (em) veya rem (rem) gibi birimler tercih edilir.

CSS border özelliği, web sayfalarında görsel ayrım oluşturmak, elementleri vurgulamak veya tasarımı geliştirmek için oldukça yararlıdır.

 

TailwindCSS:

 

Border Radius:

1.png

rounded-none border-radius: 0px;
rounded-sm border-radius: 0.125rem; /* 2px */
rounded border-radius: 0.25rem; /* 4px */
rounded-md border-radius: 0.375rem; /* 6px */
rounded-lg border-radius: 0.5rem; /* 8px */
rounded-xl border-radius: 0.75rem; /* 12px */
rounded-2xl border-radius: 1rem; /* 16px */
rounded-3xl border-radius: 1.5rem; /* 24px */
rounded-full border-radius: 9999px;
rounded-s-none border-start-start-radius: 0px; border-end-start-radius: 0px;
rounded-s-sm border-start-start-radius: 0.125rem; /* 2px */ border-end-start-radius: 0.125rem; /* 2px */
rounded-s border-start-start-radius: 0.25rem; /* 4px */ border-end-start-radius: 0.25rem; /* 4px */
rounded-s-md border-start-start-radius: 0.375rem; /* 6px */ border-end-start-radius: 0.375rem; /* 6px */
rounded-s-lg border-start-start-radius: 0.5rem; /* 8px */ border-end-start-radius: 0.5rem; /* 8px */
rounded-s-xl border-start-start-radius: 0.75rem; /* 12px */ border-end-start-radius: 0.75rem; /* 12px */
rounded-s-2xl border-start-start-radius: 1rem; /* 16px */ border-end-start-radius: 1rem; /* 16px */
rounded-s-3xl border-start-start-radius: 1.5rem; /* 24px */ border-end-start-radius: 1.5rem; /* 24px */
rounded-s-full border-start-start-radius: 9999px; border-end-start-radius: 9999px;
rounded-e-none border-start-end-radius: 0px; border-end-end-radius: 0px;
rounded-e-sm border-start-end-radius: 0.125rem; /* 2px */ border-end-end-radius: 0.125rem; /* 2px */
rounded-e border-start-end-radius: 0.25rem; /* 4px */ border-end-end-radius: 0.25rem; /* 4px */
rounded-e-md border-start-end-radius: 0.375rem; /* 6px */ border-end-end-radius: 0.375rem; /* 6px */
rounded-e-lg border-start-end-radius: 0.5rem; /* 8px */ border-end-end-radius: 0.5rem; /* 8px */
rounded-e-xl border-start-end-radius: 0.75rem; /* 12px */ border-end-end-radius: 0.75rem; /* 12px */
rounded-e-2xl border-start-end-radius: 1rem; /* 16px */ border-end-end-radius: 1rem; /* 16px */
rounded-e-3xl border-start-end-radius: 1.5rem; /* 24px */ border-end-end-radius: 1.5rem; /* 24px */
rounded-e-full border-start-end-radius: 9999px; border-end-end-radius: 9999px;
rounded-t-none border-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-t-sm border-top-left-radius: 0.125rem; /* 2px */ border-top-right-radius: 0.125rem; /* 2px */
rounded-t border-top-left-radius: 0.25rem; /* 4px */ border-top-right-radius: 0.25rem; /* 4px */
rounded-t-md border-top-left-radius: 0.375rem; /* 6px */ border-top-right-radius: 0.375rem; /* 6px */
rounded-t-lg border-top-left-radius: 0.5rem; /* 8px */ border-top-right-radius: 0.5rem; /* 8px */
rounded-t-xl border-top-left-radius: 0.75rem; /* 12px */ border-top-right-radius: 0.75rem; /* 12px */
rounded-t-2xl border-top-left-radius: 1rem; /* 16px */ border-top-right-radius: 1rem; /* 16px */
rounded-t-3xl border-top-left-radius: 1.5rem; /* 24px */ border-top-right-radius: 1.5rem; /* 24px */
rounded-t-full border-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-none border-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-r-sm border-top-right-radius: 0.125rem; /* 2px */ border-bottom-right-radius: 0.125rem; /* 2px */
rounded-r border-top-right-radius: 0.25rem; /* 4px */ border-bottom-right-radius: 0.25rem; /* 4px */
rounded-r-md border-top-right-radius: 0.375rem; /* 6px */ border-bottom-right-radius: 0.375rem; /* 6px */
rounded-r-lg border-top-right-radius: 0.5rem; /* 8px */ border-bottom-right-radius: 0.5rem; /* 8px */
rounded-r-xl border-top-right-radius: 0.75rem; /* 12px */ border-bottom-right-radius: 0.75rem; /* 12px */
rounded-r-2xl border-top-right-radius: 1rem; /* 16px */ border-bottom-right-radius: 1rem; /* 16px */
rounded-r-3xl border-top-right-radius: 1.5rem; /* 24px */ border-bottom-right-radius: 1.5rem; /* 24px */
rounded-r-full border-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-none border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-b-sm border-bottom-right-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */
rounded-b border-bottom-right-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */
rounded-b-md border-bottom-right-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */
rounded-b-lg border-bottom-right-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */
rounded-b-xl border-bottom-right-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */
rounded-b-2xl border-bottom-right-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */
rounded-b-3xl border-bottom-right-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */
rounded-b-full border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-none border-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-sm border-top-left-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */
rounded-l border-top-left-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */
rounded-l-md border-top-left-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */
rounded-l-lg border-top-left-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */
rounded-l-xl border-top-left-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */
rounded-l-2xl border-top-left-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */
rounded-l-3xl border-top-left-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */
rounded-l-full border-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-ss-none border-start-start-radius: 0px;
rounded-ss-sm border-start-start-radius: 0.125rem; /* 2px */
rounded-ss border-start-start-radius: 0.25rem; /* 4px */
rounded-ss-md border-start-start-radius: 0.375rem; /* 6px */
rounded-ss-lg border-start-start-radius: 0.5rem; /* 8px */
rounded-ss-xl border-start-start-radius: 0.75rem; /* 12px */
rounded-ss-2xl border-start-start-radius: 1rem; /* 16px */
rounded-ss-3xl border-start-start-radius: 1.5rem; /* 24px */
rounded-ss-full border-start-start-radius: 9999px;
rounded-se-none border-start-end-radius: 0px;
rounded-se-sm border-start-end-radius: 0.125rem; /* 2px */
rounded-se border-start-end-radius: 0.25rem; /* 4px */
rounded-se-md border-start-end-radius: 0.375rem; /* 6px */
rounded-se-lg border-start-end-radius: 0.5rem; /* 8px */
rounded-se-xl border-start-end-radius: 0.75rem; /* 12px */
rounded-se-2xl border-start-end-radius: 1rem; /* 16px */
rounded-se-3xl border-start-end-radius: 1.5rem; /* 24px */
rounded-se-full border-start-end-radius: 9999px;
rounded-ee-none border-end-end-radius: 0px;
rounded-ee-sm border-end-end-radius: 0.125rem; /* 2px */
rounded-ee border-end-end-radius: 0.25rem; /* 4px */
rounded-ee-md border-end-end-radius: 0.375rem; /* 6px */
rounded-ee-lg border-end-end-radius: 0.5rem; /* 8px */
rounded-ee-xl border-end-end-radius: 0.75rem; /* 12px */
rounded-ee-2xl border-end-end-radius: 1rem; /* 16px */
rounded-ee-3xl border-end-end-radius: 1.5rem; /* 24px */
rounded-ee-full border-end-end-radius: 9999px;
rounded-es-none border-end-start-radius: 0px;
rounded-es-sm border-end-start-radius: 0.125rem; /* 2px */
rounded-es border-end-start-radius: 0.25rem; /* 4px */
rounded-es-md border-end-start-radius: 0.375rem; /* 6px */
rounded-es-lg border-end-start-radius: 0.5rem; /* 8px */
rounded-es-xl border-end-start-radius: 0.75rem; /* 12px */
rounded-es-2xl border-end-start-radius: 1rem; /* 16px */
rounded-es-3xl border-end-start-radius: 1.5rem; /* 24px */
rounded-es-full border-end-start-radius: 9999px;
rounded-tl-none border-top-left-radius: 0px;
rounded-tl-sm border-top-left-radius: 0.125rem; /* 2px */
rounded-tl border-top-left-radius: 0.25rem; /* 4px */
rounded-tl-md border-top-left-radius: 0.375rem; /* 6px */
rounded-tl-lg border-top-left-radius: 0.5rem; /* 8px */
rounded-tl-xl border-top-left-radius: 0.75rem; /* 12px */
rounded-tl-2xl border-top-left-radius: 1rem; /* 16px */
rounded-tl-3xl border-top-left-radius: 1.5rem; /* 24px */
rounded-tl-full border-top-left-radius: 9999px;
rounded-tr-none border-top-right-radius: 0px;
rounded-tr-sm border-top-right-radius: 0.125rem; /* 2px */
rounded-tr border-top-right-radius: 0.25rem; /* 4px */
rounded-tr-md border-top-right-radius: 0.375rem; /* 6px */
rounded-tr-lg border-top-right-radius: 0.5rem; /* 8px */
rounded-tr-xl border-top-right-radius: 0.75rem; /* 12px */
rounded-tr-2xl border-top-right-radius: 1rem; /* 16px */
rounded-tr-3xl border-top-right-radius: 1.5rem; /* 24px */
rounded-tr-full border-top-right-radius: 9999px;
rounded-br-none border-bottom-right-radius: 0px;
rounded-br-sm border-bottom-right-radius: 0.125rem; /* 2px */
rounded-br border-bottom-right-radius: 0.25rem; /* 4px */
rounded-br-md border-bottom-right-radius: 0.375rem; /* 6px */
rounded-br-lg border-bottom-right-radius: 0.5rem; /* 8px */
rounded-br-xl border-bottom-right-radius: 0.75rem; /* 12px */
rounded-br-2xl border-bottom-right-radius: 1rem; /* 16px */
rounded-br-3xl border-bottom-right-radius: 1.5rem; /* 24px */
rounded-br-full border-bottom-right-radius: 9999px;
rounded-bl-none border-bottom-left-radius: 0px;
rounded-bl-sm border-bottom-left-radius: 0.125rem; /* 2px */
rounded-bl border-bottom-left-radius: 0.25rem; /* 4px */
rounded-bl-md border-bottom-left-radius: 0.375rem; /* 6px */
rounded-bl-lg border-bottom-left-radius: 0.5rem; /* 8px */
rounded-bl-xl border-bottom-left-radius: 0.75rem; /* 12px */
rounded-bl-2xl border-bottom-left-radius: 1rem; /* 16px */
rounded-bl-3xl border-bottom-left-radius: 1.5rem; /* 24px */
rounded-bl-full border-bottom-left-radius: 9999px;

 

Border Width:

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-s-0 border-inline-start-width: 0px;
border-s-2 border-inline-start-width: 2px;
border-s-4 border-inline-start-width: 4px;
border-s-8 border-inline-start-width: 8px;
border-s border-inline-start-width: 1px;
border-e-0 border-inline-end-width: 0px;
border-e-2 border-inline-end-width: 2px;
border-e-4 border-inline-end-width: 4px;
border-e-8 border-inline-end-width: 8px;
border-e border-inline-end-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;

 

Border Color:

border-inherit border-color: inherit;
 
border-current border-color: currentColor;
 
border-transparent border-color: transparent;
 
border-black border-color: rgb(0 0 0);
 
border-white border-color: rgb(255 255 255);
 
border-slate-50 border-color: rgb(248 250 252);
 
border-slate-100 border-color: rgb(241 245 249);
 
border-slate-200 border-color: rgb(226 232 240);

Diğer renklerin hepsi..

-------

 

Border Style:

border-solid border-style: solid;
border-dashed border-style: dashed;
border-dotted border-style: dotted;
border-double border-style: double;
border-hidden border-style: hidden;
border-none border-style: none;

 

Divide Width:

 

1.png

 

Class
Properties
divide-x-0 > * + * border-right-width: 0px; border-left-width: 0px;
divide-x-2 > * + * border-right-width: 0px; border-left-width: 2px;
divide-x-4 > * + * border-right-width: 0px; border-left-width: 4px;
divide-x-8 > * + * border-right-width: 0px; border-left-width: 8px;
divide-x > * + * border-right-width: 0px; border-left-width: 1px;
divide-y-0 > * + * border-top-width: 0px; border-bottom-width: 0px;
divide-y-2 > * + * border-top-width: 2px; border-bottom-width: 0px;
divide-y-4 > * + * border-top-width: 4px; border-bottom-width: 0px;
divide-y-8 > * + * border-top-width: 8px; border-bottom-width: 0px;
divide-y > * + * border-top-width: 1px; border-bottom-width: 0px;
divide-y-reverse > * + * --tw-divide-y-reverse: 1;
divide-x-reverse > * + * --tw-divide-x-reverse: 1;

 

Divide Color

 

Class
Properties
 
divide-inherit > * + * border-color: inherit;
 
 
divide-current > * + * border-color: currentColor;
 
 
divide-transparent > * + * border-color: transparent;
 
 
divide-black > * + * border-color: rgb(0 0 0);
 
 
divide-white > * + * border-color: rgb(255 255 255);
 
 
divide-slate-50 > * + * border-color: rgb(248 250 252);
 
 
divide-slate-100 > * + * border-color: rgb(241 245 249);
 
 
divide-slate-200 > * + * border-color: rgb(226 232 240);

 

renklerin devamı var..

 

Divide Style:

divide-solid > * + * border-style: solid;
divide-dashed > * + * border-style: dashed;
divide-dotted > * + * border-style: dotted;
divide-double > * + * border-style: double;
divide-none > * + * border-style: none;

 

Outline Width:

 

outline-0 outline-width: 0px;
outline-1 outline-width: 1px;
outline-2 outline-width: 2px;
outline-4 outline-width: 4px;
outline-8 outline-width: 8px;

 

Outline Color,Outline Style, Outline Offset sınıflarıda mevcuttur..

 

Ring Width:

Kutu gölgeli anahat halkaları oluşturmak için yardımcı sınıflarıdır. Ring Color, Ring Offset Width ve Ring Offset Color sınıflarıda mevcuttur..

1.png

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...