Egenskapen border-width

Egenskapen border-width anger bredden på kanten för alla sidor samtidigt eller varje sida för sig. Den är en sammanfattande egenskap för egenskaperna border-left-width, border-right-width, border-top-width, border-bottom-width.

Värdet på egenskapen kan vara valfri enhet för storlekar, förutom procent, eller nyckelorden thin (kant på 2 pixlar), medium (kant på 4 pixlar) eller thick (kant på 6 pixlar). Standardvärde: medium.

Syntax

cssselector {
  border-width: 1, 2, 3 eller 4 värden;
}

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Exempel

Vi sätter en kant med bredd på en pixel:

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

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

Результат:

Exempel

Vi sätter en kant med bredd på 4 pixlar:

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

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

Результат:

Exempel

Vi sätter bredden på den övre och nedre kanten till 1px, och den högra och vänstra - till 4px:

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

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

Результат:

Exempel

Vi sätter bredden på den övre kanten till 1px, den högra och vänstra - till 4px, och den nedre till 6px:

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

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

Результат:

Exempel

Vi sätter bredden på den övre kanten till 1px, den högra till 4px, den nedre - till 6px, och den vänstra till 8px:

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

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

Результат:

Exempel

Vi sätter kantens bredd med nyckelordet thin:

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

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

Результат:

Exempel

Vi sätter kantens bredd med nyckelordet medium:

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

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

Результат:

Exempel

Vi sätter kantens bredd med nyckelordet thick:

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

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

Результат:

Exempel

Vi sätter olika kanter för olika sidor:

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

Результат:

Se även