CSS Rand

CSS randeigenschap

CSS border De eigenschap staat u toe om de stijl, breedte en kleur van de elementrand te specificeren.

Ik heb een rand om alle kanten.

Ik heb een rode onderste rand.

Ik heb ronde hoeken.

Ik heb een blauwe linker rand.

CSS randstijl

border-style De eigenschap specificeert het soort rand dat moet worden weergegeven.

De volgende waarden zijn toegestaan:

  • dotted - Definieer een gepunktte rand
  • dashed - Definieer een gestippelde rand
  • solid - Definieer een lijnrand
  • double - Definieer een dubbele rand
  • groove - Definieer een 3D groef rand. Het effect hangt af van de waarde van border-color
  • ridge - Definieer een 3D rib rand. Het effect hangt af van de waarde van border-color
  • inset - Definieer een 3D inset rand. Het effect hangt af van de waarde van border-color
  • outset - Definieer een 3D outset rand. Het effect hangt af van de waarde van border-color
  • none - Definieer een rand zonder rand
  • hidden - Definieer een verborgen rand

border-style De eigenschap kan één tot vier waarden instellen (voor de bovenste, rechter, onderste en linker rand).

Voorbeeld

Toon verschillende randstijlen:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

Dashed border.

Dotted border.

Solid border.

Dashed border.

Groove border. Its effect depends on the value of border-color.

Ridge border. Its effect depends on the value of border-color.

3D inset border. Its effect depends on the value of border-color.

3D outset border. Its effect depends on the value of border-color.

No border.

Hidden border.

Mixed border.

Try it yourself

Note:Unless set border-style Properties, otherwise other CSS border properties (which will be explained in detail in the next chapter) will have no effect!