CSS Kenarlıklar (Border)

Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

  • border-style
  • border-width
  • border-color

Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

  • Kenarları ayrı ayrı şekillendirmek
  • Kenarlık kullanımının kısa yolu
Kullanabileceğiniz stiller:
none – Kenarlık yok
dotted – Noktalı
dashed – Kesik çizgili
solid – Çizgi
double – Çift çizgi
groove
ridge
inset
outset

Örnek Bir Kullanım

 .kutu { border-style: dotted; }

border-width: Kenarlık Boyutu

Kenar genişliğini belirtmemizi sağlar. Öncelikle mutlaka border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.


Örnek Kullanım

 .kutu { border-style: solid; border-width: 1px; }

border-color: Kenarlık Rengi

Kenarlık rengini bu komutla değiştirebiliriz.Öncelikle mutlaka border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek Kullanım

 .kutu {
    border-style: solid;
    border-width: 4px;
    border-color: #29A8DF; 
 }

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

  • border-left-style : Sol kenarın şekli.
  • border-right-style : Sağ kenarın şekli.
  • border-top-style : Üst kenarın şekli.
  • border-bottom-style : Alt kenarın şekli.

Örnek Kullanım

 .kutu {
   border-left-style:double;
   border-right-style:solid;
   border-bottom-style:dashed;
   border-top-style:groove;
 }

Ayrıca “border-style: dotted solid double dashed;” şeklinde kullanılarak dört kenarın için ayrı değerler atanabilir.

Örnek Kullanım

.kutu {
  border-style:double solid dashed groove;
}

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün.


Örnek Kullanım

 .kutu {border: 3px #29A8DF solid;}

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

  • border-left : Sol Kenar
  • border-right : Sağ Kenar
  • border-top : Üst Kenar
  • border-bottom : Alt Kenar

Örnek Kullanım

 .kutu {
   border-left: 5px red solid;
   border-right: 5px blue solid;
   border-top: 8px grey solid;
   border-bottom: 10px orange solid;
 }