<!DOCTYPE html>
<html>
<head>
<title> border-radius </title>
<style>
#normal {
border: 2px solid red;
width:200px;
height:100px;
}
#round1 {
border: 5px solid blue;
border-radius: 5px 10px;
width:200px;
height:100px;
}
#round2 {
border: 2px solid red;
border-radius: 8px;
width:200px;
height:100px;
}
#round3 {
border: 2px solid red;
border-radius: 12px;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<div id="normal">Normal border</div><br><br>
<div id="round1">Redondeado</div><br><br>
<div id="round2">Mas redondeado</div><br><br>
<div id="round3">Super redondeado</div>
</body>
</html>