Tenemos la siguiente propiedad : border-radius
Cabe mencionar que el efecto bordado no funciona para todos los navegadores, pero si para : chrome, mozilla firefox, safari.
A continuación un ejemplo de como redondear un DIV
DIV{Donde :
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}
- border: tamaño(px) y color
- -moz : para Mozilla;
- -webkit: para navegador que utilicen webkit(Chrome, Safari);
- padding : Espaciado
Pero el atributo border-radius tiene otras posibles configuraciones, en la que se pueden definir los valores para el radio de las cuatro esquinas por separado. De esta manera:
-moz-border-radius: 7px 10px 100px 50px;