Angoli arrotondati con i CSS

Con la proprietà CSS border-radius, puoi dare a qualsiasi elemento "angoli arrotondati".

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>