CSS-rund kant

CSS-rund kant

border-radius Egenskapen används för att lägga till runda kantlinjer till element:

Vanliga kantlinjer

Runda kantlinjer

Runda kantlinjer

Runda kantlinjer

Exempel

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

Prova själv

Mer exempel

Alla övre kantlinjeegenskaper i en deklaration
Detta exempel visar förkortningsegenskaper, som används för att sätta alla egenskaper för övre kantlinjen i en enda deklaration.
Ställ in stilen för nedre kantlinjen
Detta exempel visar hur du ställer in stilen för nedre kantlinjen.
Ställ in bredden på vänstra kanten
Detta exempel visar hur du ställer in bredden på vänstra kanten.
Ställ in färgen för alla fyra kanter
Detta exempel visar hur du ställer in färgen för alla fyra kanter. Det kan ha en till fyra färger.
Ställ in färgen på högra kanten
Detta exempel visar hur du ställer in färgen på högra kanten.

Alla CSS kantegenskaper

Egenskap Beskrivning
border Kortformad egenskap, ställ in alla kantegenskaper i ett uttalande.
border-color Kortformad egenskap, ställ in färgen för alla fyra kanter.
border-radius Kortformad egenskap, kan ställa in alla fyra border-*-radius egenskaper för rund kant.
border-style Kortformad egenskap, ställ in stilen för alla fyra kanter.
border-width Kortformad egenskap, ställ in bredden för alla fyra kanter.
border-bottom Kortformad egenskap, ställ in alla nedre kantegenskaper i ett uttalande.
border-bottom-color Ställ in färg för nedre kant.
border-bottom-style Ställ in stil för nedre kant.
border-bottom-width Ställ in bredd på nedre kant.
border-left Kortformad egenskap, ställ in alla vänstra kantegenskaper i ett uttalande.
border-left-color Ställ in färg för vänstra kant.
border-left-style Ställ in stil för vänstra kant.
border-left-width Ställ in bredd på vänstra kant.
border-right Kortformad egenskap, ställ in alla högra kantegenskaper i ett uttalande.
border-right-color Ställ in färg för högra kant.
border-right-style Ställ in stil för högra kant.
border-right-width Ställ in bredd på högra kant.
border-top Kortformad egenskap, ställ in alla övre kantegenskaper i ett uttalande.
border-top-color Ställ in färg för övre kant.
border-top-style Ställ in stil för övre kant.
border-top-width Ställ in bredd på övre kant.