Border-style հատկությունը

border-style հատկությունը սահմանում է եզրագծի ոճը բոլոր կողմերի համար միաժամանակ կամ առանձին յուրաքանչյուր կողմի համար: Հանդիսանում է հապավում հետևյալ հատկությունների համար: border-left-style, border-right-style, border-top-style, border-bottom-style:

Շարահյուսություն

cssընտրող {
  border-style: արժեք;
}

Արժեքներ

Լռելյայն արժեքը: none:

Արժեքների քանակը

Հատկությունը կարող է ընդունել 1, 2, 3 կամ 4 արժեքներ, որոնք նշվում են բացատով բաժանված:

Օրինակ : Solid արժեք

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

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

Результат:

Օրինակ : Dotted արժեք

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

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

Результат:

Օրինակ : Dashed արժեք

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

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

Результат:

Օրինակ : Ridge արժեք

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

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

Результат:

Օրինակ : Double արժեք

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

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

Результат:

Օրինակ : Groove արժեք

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

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

Результат:

Օրինակ : Inset արժեք

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

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

Результат:

Օրինակ : Outset արժեք

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

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

Результат:

Օրինակ

Այս օրինակում տարբեր տիպի եզրագծեր են սահմանված տարրի տարբեր կողմերի համար:

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

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

Результат:

Օրինակ

Այժմ տարրի տարբեր կողմերի համար նաև սահմանված է եզրագծի տարբեր հաստություն և գույն:

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

Результат:

Օրինակ

Այժմ վերևի և ներքևի եզրագծերի համար սահմանված է solid տիպը, իսկ աջ և ձախ կողմերի համար՝ dotted տիպը:

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

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

Результат:

Տես նաև