Bordes

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
        
    

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
    

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
        
    

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.

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

Rojo Claro

        
        
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.

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.

            
            

                Inicio
                Servicios
                Perfiles
            

            
            

                Inicio
                Servicios
                Perfiles