La proprietà CSS border-radius definisce il raggio degli angoli di un elemento.
Questa proprietà consente di aggiungere angoli arrotondati agli elementi!
ESEMPIO
CODICE
<!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>
<table style="width: 100%; margin-left: auto; margin-right: auto;" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td id="rcorners1" style="text-align: center; vertical-align: middle;">Rounded corners for an element with a specified background color: <p id="rcorners1" style="align: middle;">Rounded corners!</p></td>
<td id="rcorners2" style="text-align: center; vertical-align: middle;">Rounded corners for an element with a border:<p id="rcorners2" style="align: middle;">Rounded corners!</p> </td>
<td id="rcorners3" style="text-align: center; vertical-align: middle;">Rounded corners for an element with a background image:<p id="rcorners3" style="align: center;">Rounded corners!</p> </td>
</tr>
</tbody>
</table>
</body>
</html>