CSS rundade hörn

Innehållsförteckning

Visa innehållsförteckning

CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".

CSS border-radius Egenskap

CSS Egenskapen border-radius definierar radien för en elementets hörn.

Tips: Med den här egenskapen kan du lägga till rundade hörn element!

Här är tre exempel:

1. Rundade hörn för ett element med en angiven bakgrundsfärg:

Rounded corners!

2. Rundade hörn för ett element med en kant:

Rounded corners!

3. Rundade hörn för ett element med en bakgrundsbild:

Rounded corners!

Här ä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 →

<!DOCTYPE html>
<html>
<head>
<style> 
#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;  
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

Tips: Egenskapen border-radius är faktiskt en förkortningsegenskap för border-top-left-radius, border-top-right-radius, border-bottom-right-radie och border-bottom-left-radius egenskaper.

CSS border-radius - Ange varje hörn

Egenskapen border-radius kan ha från en till fyra värden. Här är reglerna:

Fyra värden - kant-radie: 15px 50px 30px 5px; (första värdet gäller för det övre vänstra hörnet, det andra värdet gäller för det övre högra hörnet, det tredje värdet gäller för det nedre högra hörnet och det fjärde värdet gäller gäller för det nedre vänstra hörnet):

Tre värden - kant-radie: 15px 50px 30px; (första värdet gäller för det övre vänstra hörnet, det andra värdet gäller för övre högra och nedre vänstra hörnet, och det tredje värdet gäller för det nedre högra hörnet ):

Två värden - kant-radie: 15px 50px; (det första värdet gäller för övre vänstra och nedre högra hörnen, och det andra värdet gäller övre högra och nedre vänstra hörnen):

Ett värde - kant-radie: 15px; (värdet gäller för alla fyra hörn, som är avrundade lika:

Här ä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 →

<!DOCTYPE html>
<html>
<head>
<style> 
#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; 
} 
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>

</body>
</html>

Du kan också skapa elliptiska hörn:

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 →

<!DOCTYPE html>
<html>
<head>
<style> 
#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;
} 
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>

<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>

</body>
</html>

Egenskaper för CSS Rounded Corners

border-radius: En förkortningsegenskap för att ställa in alla fyra border-*-*-radiusegenskaper
border-top-left-radius: Definierar formen på kanten i det övre vänstra hörnet
border-top-right-radius: Definierar formen på kanten i det övre högra hörnet
border-bottom-right-radius: Definierar formen på kanten i det nedre högra hörnet
border-bottom-left-radius: Definierar formen på kanten i det nedre vänstra hörnet