CSS3 Ya

Concepto
Ejemplo
Vista Previa

Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)

Si tenemos que redondear solo alguno de los cuatro vértices podemos utilizar alguna de las siguientes propiedades:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Con esta definición de la propiedades border-top-left-radius y border-bottom-right-radius deben aparecer redondeados los vértices superior izquierdo e inferior derecho:

#recuadro1{
  border-top-left-radius: 20px;  
  border-bottom-right-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

El segundo ejemplo muestra redondeado solo el vértice superior derecho:

#recuadro2{
  border-top-right-radius: 40px;  
  background-color:#aa0;
  width:200px;
  padding:10px;
  margin-top:10px;
}

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba</title>

#recuadro1{
  border-top-left-radius: 20px;  
  border-bottom-right-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro2{
  border-top-right-radius: 40px;  
  background-color:#aa0;
  width:200px;
  padding:10px;
  margin-top:50px;
}

body {
  background:white;
  margin:50px;
}

</style>

</head> 
<body>

<div id="recuadro1"> 
<h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

<div id="recuadro2"> 
<h3>Recuadro 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div>

</body> 
</html>

Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)

Retornar