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:

Runde kanter!

2. Runde kanter på elementer med kant:

Runde kanter!

3. Runde kanter på elementer med baggrundsbillede:

Runde kanter!

Her 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 kortformel 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 én til fire værdier. Reglerne er som følger:

Fire værdier - border-radius: 15px 50px 30px 5px;（Bruges henholdsvis til: øverste venstre kant, øverste højre kant, nederste højre kant, nederste venstre kant）：

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

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

En værdi - border-radius: 15px;（Dette værdi bruges til alle fire kanter, runde kanter er ens）：

Her 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 elliptiske kanter:

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 kortformel for alle fire border-*-*-radius-ejenskaber.
border-top-left-radius Definerer formen af kantene i øverste venstre hjørne.
border-top-right-radius Definerer formen af kantene i øverste højre hjørne.
border-bottom-right-radius Definerer formen af kantene i nederste højre hjørne.
border-bottom-left-radius Definerer formen af kantene i nederste venstre hjørne.