En este apartado se documentará todo lo referido a bordes, incluyendo el radio de los bordes
de los elementos y los bordes llenos de diferentes colores para rodear al elemento.
Las clases provistas poseen diferentes medidas establecidas a través de los parámetros
enviados en los nombres de las clases.
Bordes Redondeados
Para llevar a cabo esto la biblioteca provee diferentes clases divididas en dos conjuntos.
El primero establece radios a partir un la medida en la unidad PX, mientras que el otro conjunto
permite definir los bordes utilizando la unidad % (Porcentaje).
Bordes Redondeados en PX
El conjunto de clases utilizadas para esta tarea son los que tienen el prefijo
bor-rad-[medida en PX]. El parámetro en este caso va desde 1 a 20 px.
.bor-rad-1
.bor-rad-2
.bor-rad-3
.bor-rad-4
.bor-rad-5
.bor-rad-6
.bor-rad-7
.bor-rad-8
.bor-rad-9
.bor-rad-10
.bor-rad-11
.bor-rad-12
.bor-rad-13
.bor-rad-14
.bor-rad-15
.bor-rad-16
.bor-rad-17
.bor-rad-18
.bor-rad-19
.bor-rad-20
.bor-rad-1
.bor-rad-2
.bor-rad-3
.bor-rad-4
.bor-rad-5
.bor-rad-6
.bor-rad-7
.bor-rad-8
.bor-rad-9
.bor-rad-10
.bor-rad-11
.bor-rad-12
.bor-rad-13
.bor-rad-14
.bor-rad-15
.bor-rad-16
.bor-rad-17
.bor-rad-18
.bor-rad-19
.bor-rad-20
Borde Redondeado %
Los bordes definidos por porcentajes van desde 1% - 50% y el prefijo utilizado
es bor-rad-por-[%].
.bor-rad-por-1
.bor-rad-por-5
.bor-rad-por-10
.bor-rad-por-15
.bor-rad-por-20
.bor-rad-por-25
.bor-rad-por-30
.bor-rad-por-35
.bor-rad-por-40
.bor-rad-por-45
.bor-rad-por-50
.bor-rad-por-1
.bor-rad-por-5
.bor-rad-por-10
.bor-rad-por-15
.bor-rad-por-20
.bor-rad-por-25
.bor-rad-por-30
.bor-rad-por-35
.bor-rad-por-40
.bor-rad-por-45
.bor-rad-por-50
Si disponemos de una figura cuadrada, alto = ancho, si utlizados la clase
.bor-rad-por-50 obtenemos un circulo
perfecto.
Borde de extremos circulares
Si disponemos de un contenedor y queremos redondear los extremos
de ese contenedor generando una imágen con los bordes con dos
semicirculos perfectos
vamos a utilizar la clase .bor-pill.
.bor-pill
.bor-pill
Bordes de Colores
Vamos a definir ahora los bordes de colores para los elementos,
los mismos pueden variar de color y tamaño, es por ello que la biblioteca
cuenta con las clases suficientes para brindale al usuario de la misma
la flexibilidad necesaria para no agregar CSS innecesariamente.
Borde Negro
La clase más sencilla de utilizar es bor-[PX] siendo
PX la cantidad de pixeles del borde que va desde 1 a 10 PX.
.bor-1
.bor-2
.bor-3
.bor-4
.bor-5
.bor-6
.bor-7
.bor-8
.bor-9
.bor-10
Brode de Colores
Para definir este tipo de bordes es necesario utilizar la clase
que permite enviarle como parámetro el color.
La encargada de esta tarea es: .bor-[color]-[PX] donde
color es el color del borde y PX la cantidad de px que va a tener su grosor.
Rojo
.bor-red-1
.bor-red-2
.bor-red-3
.bor-red-4
.bor-red-5
.bor-red-6
.bor-red-7
.bor-red-8
.bor-red-9
.bor-red-10
Rojo Claro
.bor-red-s-1
.bor-red-s-2
.bor-red-s-3
.bor-red-s-4
.bor-red-s-5
.bor-red-s-6
.bor-red-s-7
.bor-red-s-8
.bor-red-s-9
.bor-red-s-10
Rojo
.bor-red-1
.bor-red-2
.bor-red-3
.bor-red-4
.bor-red-5
.bor-red-6
.bor-red-7
.bor-red-8
.bor-red-9
.bor-red-10
Rojo Claro
.bor-red-s-1
.bor-red-s-2
.bor-red-s-3
.bor-red-s-4
.bor-red-s-5
.bor-red-s-6
.bor-red-s-7
.bor-red-s-8
.bor-red-s-9
.bor-red-s-10
Tabla con los Colores Disponibles
A partir de la versión 4.0.0 se definieron algunos alias en inglés para el
nombre de las clases de bordes de los colores.
En la siguiete tabla se muestran las equivalencias.
Español
Inglés
Color
Rango
.bor-[rango]
.bor-[rango]
[1 - 10]
.bor-rojo-[rango]
.bor-red-[rango]
[1 - 10]
.bor-rojo-c-[rango]
.bor-red-s-[rango]
[1 - 10]
.bor-rojo-t-[rango]
N/A
[1 - 10]
.bor-rojo-o-[rango]
.bor-rojo-d-[rango]
[1 - 10]
.bor-verde-[rango]
.bor-green-[rango]
[1 - 10]
.bor-verde-c-[rango]
.bor-green-s-[rango]
[1 - 10]
.bor-verde-o-[rango]
.bor-green-d-[rango]
[1 - 10]
.bor-verde-t-[rango]
N/A
[1 - 10]
.bor-verde-az-[rango]
N/A
[1 - 10]
.bor-azul-[rango]
.bor-blue-[rango]
[1 - 10]
.bor-azul-c-[rango]
.bor-blue-s-[rango]
[1 - 10]
.bor-azul-o-[rango]
.bor-blue-d-[rango]
[1 - 10]
.bor-azul-ve-[rango]
N/A
[1 - 10]
.bor-azul-ve-[rango]
N/A
[1 - 10]
.bor-gris-[rango]
bor-grey-[rango]
[1 - 10]
.bor-gris-c-[rango]
bor-grey-s-[rango]
[1 - 10]
Borrar Bordes Redondeadosv5.0.0
A partir de la versión 5.0.0 se añaden las clases pertinentes para elimimar
el bordes redondeados con las clases .bor-rad-0 y
.bor-rad-por-0 que permitirán llevar el radio del borde a cero.
Ejemplo
Los grupos de botones de la librería cuentan con un borde por defecto que afecta al
primero botón y al último generando bordes redondeados de 4px. En muchas oportunidades
necesitaremos utilizar estos elementos pero sin los bordes redondeados.
Como se puede observar los elemento 1 y 3 del grupo definido tienen bordes redondeados por defecto
lo cual puede no ser bueno en algunos casos.
Como se puede observar los elemento 1 y 3 del grupo ya no tienen bordes redondeados, como ejemplo
es útil pero es importante que sepa que se puede utilizar en cualquier elemento, en este caso por simplicidad
se tomaron los grupos de botones.