CSS | Border-radius & Border-width

Muy bien, continuemos un poco con la fructuosa relación entre las propiedades border-radius y border width.


Por un lado tenemos border-witdh que nos permite dar un ancho específico a los bordes, y por otro lado border-radius que nos permite redondear las esquinas teniendo como referencia el radio vertical y horizontal de un cuarto de elipse que nos determinará la curvatura.


En el siguiente ejemplo veremos algo que hemos visto muchas veces, un div con un ancho de borde idéntico en los cuatro bordes y con una curvatura de mismo radio para todas las esquinas,la relación entre las propiedades empieza en la curvatura de la parte interior del borde que se determina por el radio menos en ancho de borde :

border-width:2px; 
border-radius:10px;

Si el resultado de Radio menos ancho de borde da como resultado un valor negativo, entonces se considera el valor como cero, se ve algo así (la parte interior del borde no tiene curvatura):

  border-width: 20px; 

border-radius: 18px;

hasta ahora hemos visto la relación entre border-witdh y border-radius en un elemento que tiene siempre el mismo ancho de borde, ahora bien, cuando dos bordes adyacentes tienen diferentes grosores la curvatura  va a mostrar una transición suave entre los bordes más gruesos y delgados, esto nos da mucho juego a la hora de crear. (Si el centro de la curvatura exterior y el de la curvatura interior son diferentes  la curva interior no puede ser un cuarto de elipse completa.):

border-width:10px 20px;
 border-radius:50px;



algunos ejemplos:

La combinación de los parámetros (radios horizontales, verticales y ancho de borde) puede dar muchas alternativas a la hora de trabajar con los objetos, de todos eso queda a criterio del programador o maquetador. 

espero que este articulo les haya sido de utilidad. 

Gracias y hasta la próxima!!!

CSS3 | Border-radius (parte II)

En el artículo anterior hemos visto la forma más sencilla de utilizar border radius, ahora veremos como se interpretan los valores de radius.

Cuando suministramos el valor en radius, estos se utilizan para definir, los radios horizontales y verticales de un cuarto de elipse, que a su vez determinará la curvatura de la esquina del elemento.

Hasta ahora hemos definido solo un valor por esquina el cual se utiliza para definir

tanto los radios horizontales como los verticales.

Veamos ahora como podemos trabajar sobre los diferentes radios, utilizaré para el ejemplo la esquina superior izquierda.

Border-top-left-radius: value_radio_horiz(A) value_radio_vert(B);

La forma rápida de border-radius se puede utilizar para definir las cuatro esquinas de forma simultánea. La propiedad acepta uno o dos conjuntos de valores, cada uno compuesto de uno a cuatro longitudes o porcentajes.

El primer conjunto de define el/los valores de los radios horizontales para las cuatro esquinas. El segundo conjunto, precedido por una "/", define el radio vertical de las cuatro esquinas.

border-radius: value(A) value(B) value(C) value(D)/value(A') value(B') value(C') value(D');

Un ejemplo podría ser:

Si los cuatro valores se suministran, representan la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda, radios, respectivamente. Si la parte inferior izquierda se omite es el mismo que arriba a la derecha, si la parte inferior derecha se omite es el mismo que arriba a la izquierda, y sólo si un valor es suministrado se utiliza para configurar todos los radios de cuatro partes iguales.


Espero que les haya sido de utilidad...
les dejo un enlace a una página que resulta muy interesante para generar radius. 


Hasta la próxima!!!

CSS3 | Border-radius (parte I)

Ha llegado el momento de mi primer publicación, espero que les sea de utilidad... 


Desde mi punto de vista, border-radius, con un buen manejo puede darnos muchas posibilidades gráficas, es sencillo y potente.


Border-radius nos permite usar esquinas redondeadas en los elementos, antiguamente (por decirlo de alguna manera) debíamos crear una imagen para lograr este mismo efecto, pero con la inclusión y desarrollo de esta propiedad, ya no es necesario. La forma abreviada es:

Border-radius: value;

En este caso, “value” es el valor introducido que se aplicará a cada una de esquinas de nuestro elemento. Es importante destacar que los valores aceptables pueden estar representados en porcentajes o pixeles.

La propiedad border-radius es compatible con IE9 +, Firefox 4 +, Chrome, Safari 5 + y Opera.Veamos dos ejemplos:

Pero las maravillas de border-radius noquedan aquí… he mencionado que la forma anteriormente descripta es la forma abreviada, pero nos da muchas más posibilidades.

Podríamos asignarle un valor diferente a cada una de las esquinas, para esto, debemos introducir los cuatro valores, border-radius los asignará al elemento comenzando por la esquina superior izquierda y continuando en el sentido horario.

Border-radius:sup_izq(A), sup_der(B), inf_der(C), inf_izq(D);

También podríamos definir cada esquina de manera individual:

Un ejemplo sencillo podría ser:

Hay que tener en cuenta que si (en laforma abreviada) se omite el valor de la esquina inferior izquierda, se le atribuirá el valor de la esquina superior derecha, de igual modo, si la esquina inferior derecha se omite el valor de radius será el de la esquina superior izquierda. Si se indica solo un valor, este se utilizará para todas las esquinas.

En esta artículo se ha presentado a border-radius de una manera sencilla y sin demasiadas complicaciones, en el articulo siguiente conoceremos un poco más de border-radius.

Gracias y hasta la próxima!!!