CSS rund kant

CSS rund kant

Gennem CSS border-radius Egenskaber, der kan implementere enhver elements 'runde kanter' stil.

CSS border-radius egenskab

CSS border-radius Egenskaben definerer elementets hjørner radius.

Tip:Du kan bruge denne egenskab til at tilføje runde kanter til elementer!

Her er tre eksempler:

1. Runde kanter på elementer med angivet baggrundsfarve:

Rundkant!

2. Runde kanter på elementer med kant:

Rundkant!

3. Runde kanter på elementer med baggrundsbillede:

Rundkant!

Dette er koden:

Eksempel

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Prøv det selv

Tip:border-radius Egenskaben er i virkeligheden en kortform for følgende egenskaber:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - angiver hver kant

border-radius Egenskaben kan acceptere en til fire værdier. Reglerne er som følger:

Fire værdier - border-radius: 15px 50px 30px 5px;（Bruges i den rækkefølge: øverste venstre hjørne、øverste højre hjørne、nederste højre hjørne、nederste venstre hjørne）：

Tre værdier - border-radius: 15px 50px 30px;（Den første værdi bruges til øverste venstre hjørne，den anden bruges til øverste højre hjørne og nederste venstre hjørne，den tredje bruges til nederste højre hjørne）：

To værdier - border-radius: 15px 50px;（Den første værdi bruges til øverste venstre hjørne og nederste højre hjørne，den anden bruges til øverste højre hjørne og nederste venstre hjørne）：

En værdi - border-radius: 15px;（Dette værdi bruges til alle fire hjørner, rundkantene er ens）：

Dette er koden:

Eksempel

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Prøv det selv

Du kan også oprette ellipseskårner:

Eksempel

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Prøv det selv

CSS rundkantegenskab

Egenskab Beskrivelse
border-radius Bruges til at sætte kortform for alle fire border-*-*-radius-ejenskaber.
border-top-left-radius Definerer formen på kanthjørnet øverst til venstre.
border-top-right-radius Definerer formen på kanthjørnet øverst til højre.
border-bottom-right-radius Definerer formen på kanthjørnet nederst til højre.
border-bottom-left-radius Definerer formen på kanthjørnet nederst til venstre.