CSS rund kanter

CSS rund kanter

Genom CSS border-radius Egenskaper kan implementera vilket elements "runda hörn"-stil.

CSS-border-radius-attribut

CSS border-radius Egenskapen definierar elementets hörnradie.

Tips:Du kan använda detta egenskap för att lägga till rundkant till element!

Här är tre exempel:

1. Element med specificerad bakgrundsfärg har rundkant:

Rundkant!

2. Element med kant har rundkant:

Rundkant!

3. Element med bakgrundsbild har rundkant:

Rundkant!

Detta är koden:

Exempel

#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; 
}

Prova själv

Tips:border-radius Egenskapen är egentligen en förkortning av följande egenskaper:

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

CSS border-radius - Specificera varje hörn

border-radius Egenskapen kan acceptera ett till fyra värden. Reglerna är som följer:

Fyra värden - border-radius: 15px 50px 30px 5px;（Används i tur och ordning för: vänstra övre hörn, högra övre hörn, högra nedre hörn, vänstra nedre hörn）：

Tre värden - border-radius: 15px 50px 30px;（Den första värdet används för vänstra övre hörn, den andra värdet används för högra övre och vänstra hörn, den tredje används för högra nedre hörn）：

Två värden - border-radius: 15px 50px;（Den första värdet används för vänstra övre och nedre hörn, den andra värdet används för högra övre och vänstra hörn）：

En värde - border-radius: 15px;（Denna värde används för alla fyra hörn, rundkantarna är desamma）：

Detta är koden:

Exempel

#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; 
}

Prova själv

Du kan också skapa ellipsekanta:

Exempel

#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;
}

Prova själv

CSS rundkantsegenskap

Egenskap Beskrivning
border-radius Används för att sätta kortform av alla fyra border-*-*-radius-egenskaper.
border-top-left-radius Definiera formen på kantens vänstra övre hörn.
border-top-right-radius Definiera formen på kantens övre högra hörn.
border-bottom-right-radius Definiera formen på kantens nedre högra hörn.
border-bottom-left-radius Definiera formen på kantens vänstra nedre hörn.