Egenskapen border-width

Egenskapen border-width angir tykkelsen på kanten for alle sider samtidig eller separat for hver side. Den er en sammensatt egenskap for egenskapene border-left-width, border-right-width, border-top-width, border-bottom-width.

Verdien til egenskapen kan være alle enheter for størrelser, unntatt prosent, eller nøkkelordene thin (kant på 2 piksler), medium (kant på 4 piksler) eller thick (kant på 6 piksler). Standardverdi: medium.

Syntaks

cssvelger {
  border-width: 1, 2, 3 eller 4 verdier;
}

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Eksempel

La oss sette en kant med tykkelse på én piksel:

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

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

Результат:

Eksempel

La oss sette en kant med tykkelse på 4 piksler:

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

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

Результат:

Eksempel

La oss sette tykkelsen på øvre og nedre kant til 1px, og høyre og venstre - til 4px:

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

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

Результат:

Eksempel

La oss sette tykkelsen på den øvre kanten til 1px, høyre og venstre - til 4px, og den nedre til 6px:

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

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

Результат:

Eksempel

La oss sette tykkelsen på den øvre kanten til 1px, høyre til 4px, nedre - til 6px, og venstre til 8px:

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

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

Результат:

Eksempel

La oss sette kanttykkelsen med nøkkelordet thin:

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

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

Результат:

Eksempel

La oss sette kanttykkelsen med nøkkelordet medium:

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

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

Результат:

Eksempel

La oss sette kanttykkelsen med nøkkelordet thick:

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

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

Результат:

Eksempel

La oss sette forskjellig kant for forskjellige sider:

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 også