With the CSS border-radius
property, you can give any element "rounded corners".
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:
#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.
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:
#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:
#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>
Lyhytmuotoinen ominaisuus kaikkien neljän reuna-*-*-säteen ominaisuuden asettamiseen
Määrittää vasemman yläkulman reunuksen muodon
Määrittää oikean yläkulman reunuksen muodon
Määrittää oikean alakulman reunan muodon
Määrittää vasemman alakulman reunan muodon