Xüsusiyyət border-style

border-style xüsusiyyəti sərhədin stilını bütün tərəflər üçün eyni anda və ya hər tərəf üçün ayrı-ayrılıqda təyin edir. Aşağıdakı xüsusiyyətlər üçün qısaldılmış xüsusiyyətdir: border-left-style, border-right-style, border-top-style, border-bottom-style.

Sintaksis

cssselektor {
  border-style: qiymet;
}

Qiymetlər

Qiymet	Açıqlama
`solid`	Kəsintisiz xətt.
`dotted`	Nöqtəli sərhəd.
`dashed`	Tireli sərhəd.
`ridge`	Qabarıq xətt şəklində sərhəd.
`double`	İkiqat xətt şəklində sərhəd. Effekti görmək üçün sərhədin qalınlığı ən azı `3px` olmalıdır.
`groove`	Oyuq sərhəd.
`inset`	Basıq sərhəd.
`outset`	Qabarıq sərhəd.
`none`	Sərhədin olmaması.

Standart qiymət: none.

Qiymətlərin sayı

Xüsusiyyət 1, 2, 3 və ya 4 sayda qiymət qəbul edə bilər, boşluqla ayrılır:

Say	Açıqlama
`1`	Bütün tərəflər üçün eyni tip.
`2`	Birinci qiymət üst və alt, ikinci - sol və sağ sərhədlər üçün.
`3`	Birinci qiymət üst, ikinci - sol və sağ sərhədlər, üçüncü - alt sərhəd üçün.
`4`	Birinci qiymət üst sərhəd, ikinci - sağ, üçüncü - alt, dördüncü - sol sərhəd üçün.

Nümunə . Solid qiyməti

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

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

Результат:

Nümunə . Dotted qiyməti

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

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

Результат:

Nümunə . Dashed qiyməti

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

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

Результат:

Nümunə . Ridge qiyməti

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

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

Результат:

Nümunə . Double qiyməti

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

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

Результат:

Nümunə . Groove qiyməti

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

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

Результат:

Nümunə . Inset qiyməti

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

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

Результат:

Nümunə . Outset qiyməti

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

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

Результат:

Nümunə

Bu nümunədə elementin müxtəlif tərəfləri üçün müxtəlif sərhəd tipləri təyin edilib:

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

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

Результат:

Nümunə

İndi isə elementin müxtəlif tərəfləri üçün müxtəlif sərhəd qalınlığı və rəngi təyin edilib:

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

Результат:

Nümunə

İndi üst və alt sərhəd üçün solid tipi, sağ və sol üçün isə dotted tipi təyin edilib:

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

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

Результат:

Həmçinin bax

border-color xüsusiyyəti,
sərhədin rəngini təyin edir
border-width xüsusiyyəti,
sərhədin qalınlığını təyin edir
border xüsusiyyəti,
sərhəd üçün qısaldılmış xüsusiyyətdir