CSS pyöristetyt kulmat


Sisällysluettelo

    Näytä sisällysluettelo


CSS Rounded Corners

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


CSS border-radius -ominaisuus

CSS Ominaisuus border-radius määrittää an:n säteen elementin kulmat.

Vinkki: Tämän ominaisuuden avulla voit lisätä pyöristettyjä kulmia elementtejä!

Tässä on kolme esimerkkiä:

1. Pyöristetyt kulmat elementille, jolla on määritetty taustaväri:

Rounded corners!

2. Pyöristetyt kulmat reunuksella varustetulle elementille:

Rounded corners!

3. Pyöristetyt kulmat elementille, jossa on taustakuva:

Rounded corners!

Tässä on koodi:

Esimerkki

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

Kokeile itse →

<!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>


Vinkki: border-radius-ominaisuus on itse asiassa lyhennetty ominaisuus border-top-left-radius, border-top-right-radius, reuna-alha-oikea-säde ja border-bottom-left-radius-ominaisuudet.



CSS border-radius - Määritä jokainen kulma

Omaisuudella border-radius voi olla yksi neljään arvoon. Tässä säännöt:

Neljä arvoa - reunan säde: 15px 50px 30px 5px; (ensimmäinen arvo koskee vasenta yläkulmaa, toinen arvo koskee oikeaa yläkulmaa, kolmas arvo koskee oikeaa alakulmaa ja neljäs arvo koskee vasenta alakulmaa):

Kolme arvoa - border-radius: 15px 50px 30px; (ensimmäinen arvo koskee vasenta yläkulmaa, toinen arvo koskee oikeaa ylä- ja vasenta alakulmaa ja kolmas arvo koskee oikeaa alakulmaa ):

Kaksi arvoa - raja-säde: 15px 50px; (ensimmäinen arvo koskee vasenta ylä- ja alakulmaa ja toinen arvo oikeaa ylä- ja vasenta alakulmaa):

Yksi arvo - border-radius: 15px; (arvo koskee kaikkia neljää kulmaa, jotka pyöristetään tasaisesti:

Tässä on koodi:

Esimerkki

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

Kokeile itse →

<!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>


Voit myös luoda elliptisiä kulmia:

Esimerkki

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

Kokeile itse →

<!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>




CSS:n pyöristetyt kulmat

border-radius

Lyhytmuotoinen ominaisuus kaikkien neljän reuna-*-*-säteen ominaisuuden asettamiseen

border-top-left-radius

Määrittää vasemman yläkulman reunuksen muodon

border-top-right-radius

Määrittää oikean yläkulman reunuksen muodon

border-bottom-right-radius

Määrittää oikean alakulman reunan muodon

border-bottom-left-radius

Määrittää vasemman alakulman reunan muodon