Bodystyle ofrece una variedad de utilitarios para gestionar los bordes de los elementos de manera
sencilla y eficiente. Estos utilitarios permiten aplicar bordes redondeados
y controlar el grosor y el estilo de los bordes. A continuación, se detallan los
diferentes utilitarios disponibles para trabajar con bordes en Bodystyle.
📋 Tabla de Referencia Rápida
Sección
Clase
Descripción
Rango
Bordes Radio [PX]
.bor-rad-[PX]
Radio de bordes en píxeles
0 - 20px
.bor-pill
Borde completamente redondeado
100%
Bordes Radio [%]
.bor-rad-por-[%]
Radio de bordes en porcentaje
0% - 50%
Bordes Sólidos
.bor-[PX]
Borde negro sólido
1 - 10px
Bordes Colores
.bor-red-[PX]
Borde rojo
1 - 10px
.bor-blue-[PX]
Borde azul
1 - 10px
.bor-green-[PX]
Borde verde
1 - 10px
.bor-gray-[PX]
Borde gris
1 - 10px
.bor-[COLOR]-s-[PX]
Variante clara del color
1 - 10px
Bordes Radio [PX]
A continuación veremos como aplicar bordes redondeados a paratir de un conjunto de clases
que permitirán definir el radio de los bordes en píxeles.
Las clases utilizadas son .bor-rad-[PX] donde PX hace referencia
a la cantidad de píxeles que se desea aplicar como radio al borde del elemento que puede ir desde 0 hasta 20PX.
.bor-rad-0
.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-pill
Borde Pill (.bor-pill)
La clase .bor-pill aplica un borde completamente redondeado al elemento,
creando una forma de píldora o cápsula. Es ideal para botones, badges, tags y otros elementos que requieren un aspecto suave y moderno.
Propiedad CSS equivalente:border-radius: 50px (o valor muy alto)
Ejemplos de Uso
Botones Pill:
Badges Pill:
NuevoActivoPendiente
Comparación:
.sin-radio
.bor-rad-5
.bor-pill
NuevoActivoPendiente
Información
Casos de uso: Botones de acción, badges de estado, etiquetas, chips, notificaciones. Compatibilidad:.bor-pill funciona con cualquier elemento y se puede combinar con colores, tamaños y otros estilos. Diferencia con .bor-rad-20:.bor-pill es más extremo, asegurando la máxima curvatura independientemente del tamaño del elemento.
Bordes Radio [%]
También es posible aplicar bordes redondeados utilizando porcentajes para definir el radio de los
bordes.
Las clases utilizadas son .bor-rad-por-[%] donde % hace referencia
al porcentaje que se desea aplicar como radio al borde del elemento que puede ir desde 0% hasta 50%.
.bor-rad-por-0
.bor-rad-por-10
.bor-rad-por-20
.bor-rad-por-30
.bor-rad-por-40
.bor-rad-por-50
Información
Es importante a clarar que en el caso bor-rad-por-50 permite generar contenedores redondos si
los mismos son cuadrados.
.bor-rad-por-50
.bor-rad-por-0
.bor-rad-por-10
.bor-rad-por-20
.bor-rad-por-30
.bor-rad-por-40
.bor-rad-por-50
Información
Como se puede observar en el código se utilizaron las clases de Grid,
las clases de Padding, y las clases de Colores
para mejorar la presentación de los ejemplos.
Es recomendable revisar estas secciones para comprender bien como las diferentes funcionalidades son integradas
en Bodystyle.
Bordes
En esta sección veremos como añadirle bordes a los elementos, en primera instancia veremos los bordes
de color negro a través de la clase .bor-[PX] siendo PX
el tamaño en PX del borde.
.bor-1
.bor-2
.bor-3
.bor-4
.bor-5
.bor-6
.bor-7
.bor-8
.bor-9
.bor-10
.bor-1
.bor-2
.bor-3
.bor-4
.bor-5
.bor-6
.bor-7
.bor-8
.bor-9
.bor-10
Bordes Colores
Ahora veremos como utilizar bordes de colores para lo cual utilizaremos
las clases .bor-[COLOR]-[PX] done color
es el color del borde y PX el tamaño en píxeles del mismo.