Divisiones con borde redondo

Las cajas con borde redondo en CSS3 es sin duda una de las aplicaciones estéticas con las que puede resaltar a nuestros contenidos de información,  comentarios etc., las propiedades de los bordes son: solid, ridge, dashed, rotted, double, groove, hidden e inset nos ayudaran a tener una mejor presentación en nuestros trabajo.



Podemos manejas los bordes por pixeles o con porcentajes, podemos manejar la posicion de cada uno de nuestros bordes con respecto a nuestra caja(division) izquierda, derecha, arriba, abajo, como se muestra a continuación:

border-top-left-radius:63px;
border-top-right-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

Si trabajamos con porcentajes, podemos disminuir de 50% hasta 10% o hasta donde nos guste. Nos quedaría un borde cada vez menos redondo en todos sus lados, al disminuir hasta 10%; y casi un circulo cuando el valor son maximos de 40%  en adelante.
border-radius:50%;

Para poder entender más a fondo, siempre es necesario practicar y estar jugando con el codigo, escribimos en nuestro body la siguiente divisiones:

<div id="radius">
<div id="cont">
La realidad es creada por la mente, podemos cambiar la realidad al cambiar nuestra mente. Platon
</div>
</div>

A continuación insertamos el siguiente código a nuestra hoja de estilos:

#radius {
margin:100px;
width:525px;
height:100px;
border: 25px dotted #0ff;
border-radius:20%;
-moz-border-radius:20%;
-webkit-border-radius:20%;
color: #FFF;
}

#cont{
padding-top:1px;
background-color: #CCC;
width:525px;
height:100px;
/* Firefox 1-3.6 */
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:32px;
-moz-border-radius-bottomright:32px;
/* Safari 3-4 */
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:32px;
-webkit-border-bottom-right-radius:32px;
/* IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+, Opera 10.5,  */
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:32px;
border-bottom-right-radius:32px;
}

Creamos dos cajas de ancho 525px y una altura de 100px, la primera caja contiene el contenido y un borde redondo en la parte de abajo, cada propiedad se define por separado. En la segunda caja que se llama radius, tenemos una de las propiedades de bordes, dotted, con un ancho de 25px y un borde de radio de 20% en cada uno de sus lados. Y en la segunda división, las esquinas de abajo son redondeadas 32px, como se muestra ¡en la siguiente figura:




Cambiamos el color de la propiedad de borde dotted dejando todo de color gris, cambiamos los bordes del lado derecho:




Ahora trataremos de hacer una figura con porcentajes, la cual ya dijimos que al ir aumentando, se puede crear circulos en css3:

#radius {
margin:100px;
padding-top:20px;
width:525px;
height:100px;
border-radius:10px;
border: 25px ridge #00CCF0;
-moz-border-radius-topleft: 63px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:63px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
border-top-left-radius:63px;
border-top-right-radius:75px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
color: #FFFF99;
}

#cont{
padding-top:50px;
background-color: #00CCF0;
width:525px;
height:200px;
-moz-radius:70%;
-webkit-radius:70%;
border-radius:70%;
}

Ahora la caja llamada cont se define con un porcentaje de 70% al ir bajando 50% esta disminuirá su borde, si queremos una círculos perfectos tendremos que ir bajando las propiedades de width y height.



Como vemos en la figura de arriba introducimos una propiedad de borde, ridge, que nos permite tener una mejor presentación en nuestro trabajo, se puede emplear para marcos. En la caja cont sí bajamos hasta un 20% de borde redondo nos que dará de la siguiente forma:




Para finalizar usted puede escribir el codigo siguiente y, asi, evitar que declare demasiados bordes

border-radius: 50px 20px 5px 1px;

Nota: El siguiente articulo nos indica como resolver problemas de CSS3 con distintos navegadores. Prefijos CSS3