border-width Özelliği

border-width özelliği, kenarlık kalınlığını tüm taraflar için aynı anda veya her bir taraf için ayrı ayrı belirler. border-left-width, border-right-width, border-top-width, border-bottom-width özellikleri için bir kısaltma özelliğidir.

Özellik değeri olarak yüzde birimleri hariç herhangi bir boyut birimi veya thin (2 piksel kenarlık), medium (4 piksel kenarlık) veya thick (6 piksel kenarlık) anahtar kelimeleri kullanılabilir. Varsayılan değer: medium.

Sözdizimi

cssseçici {
  border-width: 1, 2, 3 veya 4 değer;
}

Değer Sayısı

Özellik 1, 2, 3 veya 4 adet, boşlukla ayrılmış değer alabilir:

Örnek

Bir piksel kalınlığında kenarlık belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

4 piksel kalınlığında kenarlık belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Üst ve alt kenarlık kalınlığını 1px, sağ ve sol kenarlık kalınlığını ise 4px olarak belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Üst kenarlık kalınlığını 1px, sağ ve sol kenarlık kalınlığını 4px, alt kenarlık kalınlığını ise 6px olarak belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Üst kenarlık kalınlığını 1px, sağ kenarlık kalınlığını 4px, alt kenarlık kalınlığını - 6px, sol kenarlık kalınlığını ise 8px olarak belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px 4px 6px 8px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Kenarlık kalınlığını thin anahtar kelimesiyle belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: thin;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Kenarlık kalınlığını medium anahtar kelimesiyle belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: medium;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Kenarlık kalınlığını thick anahtar kelimesiyle belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: thick;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Результат:

Örnek

Farklı taraflar için farklı kenarlık belirleyelim:

html<div id="elem"></div>

css#elem {
  border-width: 1px 2px 3px 4px;
  border-style: dashed dotted solid double;
  border-color: red blue green black;
  width: 300px;
  height: 100px;
}

Результат:

Ayrıca Bakınız