CSS Hoekrand

CSS Hoekrand

border-radius De eigenschap wordt gebruikt om ronde hoeken randen toe te voegen aan elementen:

Normale rand

Afgeronde hoeken rand

Afgeronde hoeken rand

Afgeronde hoeken rand

Voorbeeld

p {
  border: 2px solid red;
  border-radius: 5px;
}

Probeer het zelf

Meer voorbeelden

Alle bovenste rand eigenschappen in een verklaring
Dit voorbeeld demonstreert de korte eigenschappen, gebruikt om alle eigenschappen van de bovenste rand in één verklaring in te stellen.
Stijl van de onderste rand instellen
Dit voorbeeld toont hoe je de stijl van de onderste rand instelt.
De breedte van de linker rand instellen
Dit voorbeeld demonstreert hoe je de breedte van de linker rand instelt.
De kleur van de vier randen instellen
Dit voorbeeld demonstreert hoe je de kleur van de vier randen instelt. Het kan één tot vier kleuren hebben.
De kleur van de rechter rand instellen
Dit voorbeeld demonstreert hoe je de kleur van de rechter rand instelt.

Alle CSS rand-eigenschappen

Eigenschap Beschrijving
border Korte eigenschap, alle rand-eigenschappen instellen in één verklaring.
border-color Korte eigenschap, de kleur van de vier randen instellen.
border-radius Korte eigenschap, alle vier border-*-radius-eigenschappen instellen.
border-style Korte eigenschap, het stijl van de vier randen instellen.
border-width Korte eigenschap, de breedte van de vier randen instellen.
border-bottom Korte eigenschap, alle onderste rand-eigenschappen instellen in één verklaring.
border-bottom-color Stel de kleur van de onderste rand in.
border-bottom-style Stel het stijl van de onderste rand in.
border-bottom-width Stel de breedte van de onderste rand in.
border-left Korte eigenschap, alle linker rand-eigenschappen instellen in één verklaring.
border-left-color Stel de kleur van de linker rand in.
border-left-style Stel het stijl van de linker rand in.
border-left-width Stel de breedte van de linker rand in.
border-right Korte eigenschap, alle rechter rand-eigenschappen instellen in één verklaring.
border-right-color Stel de kleur van de rechter rand in.
border-right-style Stel het stijl van de rechter rand in.
border-right-width Stel de breedte van de rechter rand in.
border-top Korte eigenschap, alle bovenste rand-eigenschappen instellen in één verklaring.
border-top-color Stel de kleur van de bovenste rand in.
border-top-style Stel het stijl van de bovenste rand in.
border-top-width Stel de breedte van de bovenste rand in.