Border-width häsiýeti

border-width häsiýeti hemme tarap üçin bir wagtyň özünde ýa-da her tarap üçin aýratyn serhediň galyňlygyny kesgitleýär. Bu häsiýet border-left-width, border-right-width, border-top-width, border-bottom-width häsiýetleri üçin gysgaldylan häsiýetdir.

Häsiýetiň bahasy hökmünde göterimlerden başga ölçeg birlikleri ulanylyp bilner, ýa-da-da thin (serhed 2 pikselde), medium (serhed 4 pikselde) ýa-da thick (serhed 6 pikselde) ýaly açar sözler ulanylyp bilner. Bellenen görnüşi: medium.

Sintaksis

cssselektor {
  border-width: 1, 2, 3 ýa-da 4 baha;
}

Baha sany

Häsiýet 1, 2, 3 ýa-da 4 bahany kabul edip biler, bosluk bilen bellenen:

Mysal

Bir piksel galyňlygynda serhed belgiýäris:

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

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

Результат:

Mysal

4 piksel galyňlygynda serhed belgiýäris:

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

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

Результат:

Mysal

Ýokarky we aşaky serhediň galyňlygyny 1px, çep we sag serhediň galyňlygyny bolsa 4px belgiýäris:

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

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

Результат:

Mysal

Ýokarky serhediň galyňlygyny 1px, çep we sag serhediň galyňlygyny 4px, aşaky serhediň galyňlygyny bolsa 6px belgiýäris:

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

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

Результат:

Mysal

Ýokarky serhediň galyňlygyny 1px, sag serhediň galyňlygyny 4px, aşaky serhediň galyňlygyny - 6px, çep serhediň galyňlygyny bolsa 8px belgiýäris:

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

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

Результат:

Mysal

thin açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Результат:

Mysal

medium açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Результат:

Mysal

thick açar sözi bilen serhediň galyňlygyny belgiýäris:

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

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

Результат:

Mysal

Har tarap üçin dürli serhed belgiýäris:

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;
}

Результат:

Şeýle-de göz aýlaň