# Borders (bordes y radios)
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/docs/borders.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Utilidades · Superficie
Compón presencia, lado, grosor, estilo, color y radio sin recurrir a reglas específicas por componente.
v2.0
10
## Grosores 0–10
Control global o independiente para cada lado del elemento.
⌜
## Radios completos
Escala hasta 100px, formas circulares y control por lado o esquina.
●
## Color componible
Usa alias semánticos o clases de paleta `.border-*`.
i
## Fórmula recomendada
Combina una base, un grosor, un estilo, un color y opcionalmente un radio: `.border .border-2 .border-solid .border-secondary .rounded-12`.
Base predecible `.border`, `.border-x`, `.border-y` y las variantes por lado crean únicamente un trazo sólido de 1px. No declaran color ni usan `!important`; sin una utilidad de color conservan el `currentColor` nativo de CSS.
Código + resultado
## Compara composiciones de borde
Cada ejemplo utiliza únicamente clases disponibles en los módulos de borde y color.
HTML
Resultado aplicado 2px · solid
Borde real
Elemento de ejemplo Base + grosor + estilo + color + radio
La clase .border crea el borde base; el resto de utilidades reemplaza grosor, estilo, color y radio.
```html
Elemento de ejemplo
```
.border-dashed sólo cambia el estilo; .border-3 mantiene el grosor explícito.
```html
Elemento de ejemplo
```
Las variantes de lado pueden combinar presencia, grosor y color sobre el mismo borde.
```html
Elemento de ejemplo
```
.rounded-p usa el radio completo del sistema y genera una píldora según la altura del elemento.
```html
Estado activo
```
Trazo
## Grosores y estilos
El grosor se expresa en píxeles y puede aplicarse a todos los lados o a uno específico.
`.border-0` 0px
`.border-1` 1px
`.border-2` 2px
`.border-3` 3px
`.border-4` 4px
`.border-5` 5px
`.border-6` 6px
`.border-7` 7px
`.border-8` 8px
`.border-9` 9px
`.border-10` 10px
`.border-solid` Trazo continuo
`.border-dashed` Trazo segmentado
`.border-dotted` Trazo punteado
`.border-double` Trazo doble
`.border-hidden` Oculto para resolución de tablas
`.border-none` Sin estilo visible
Convención `.border-*` es la única familia para estilos y grosores de borde. Para subrayados y tachados usa [.decoration-*](line-types.md).
Por lado Inserta `t`, `r`, `b` o `l`: `.border-t-4`, `.border-r-2`, `.border-b-1`, `.border-l-6`.
Forma
## Escala de radios
La escala incluye 0px, 2px, 4px y luego incrementos de 4px hasta 100px. Para comparar correctamente la curva, cada muestra aplica el valor sólo a la esquina superior izquierda.
`.rounded-0` Radio: 0px
`.rounded-2` Radio: 2px
`.rounded-4` Radio: 4px
`.rounded-8` Radio: 8px
`.rounded-12` Radio: 12px
`.rounded-16` Radio: 16px
`.rounded-20` Radio: 20px
`.rounded-24` Radio: 24px
`.rounded-28` Radio: 28px
`.rounded-32` Radio: 32px
`.rounded-36` Radio: 36px
`.rounded-40` Radio: 40px
`.rounded-44` Radio: 44px
`.rounded-48` Radio: 48px
`.rounded-52` Radio: 52px
`.rounded-56` Radio: 56px
`.rounded-60` Radio: 60px
`.rounded-64` Radio: 64px
`.rounded-68` Radio: 68px
`.rounded-72` Radio: 72px
`.rounded-76` Radio: 76px
`.rounded-80` Radio: 80px
`.rounded-84` Radio: 84px
`.rounded-88` Radio: 88px
`.rounded-92` Radio: 92px
`.rounded-96` Radio: 96px
`.rounded-100` Radio: 100px
Forma rápida · 01
## Círculo con `.rounded-c`
La clase aplica el radio completo del sistema. Para obtener un círculo perfecto, el elemento debe conservar una proporción cuadrada.
HTML
```html
```
`.ratio-1-1` garantiza una caja cuadrada y `.rounded-c` la convierte en círculo.
Resultado aplicado
Forma rápida · 02
## Píldora con `.rounded-p`
El radio completo se adapta a la altura del contenido. Es apropiado para etiquetas, estados y acciones compactas.
HTML
```html
Estado activo
```
El padding determina la proporción; `.rounded-p` mantiene los extremos completamente curvos.
Resultado aplicado
Estado activo
Control preciso · 03
## Radios por lado y esquina
Usa `.rounded-{lado}-{valor}` para un par de esquinas o `.rounded-s-{esquina}-{valor}` para una esquina individual.
HTML
```html
Esquinas superiores
Esquina superior izquierda
```
Los lados usan `t`, `r`, `b` y `l`; las esquinas usan `a`, `b`, `c` y `d`.
Resultado aplicado
Esquinas superiores
Esquina superior izquierda
Color
## Color independiente de la estructura
El borde se crea primero y el color se aplica después con un alias semántico o una clase de la paleta.
Recomendado Alias directo
La clase dice exactamente qué lado y qué color aplica. Es la opción más fácil de leer.
```html
Borde superior primario
```
Resultado: borde superior primario
Úsalo cuando el color pertenece a un borde concreto.
Paleta Color explícito
La estructura y el color siguen siendo independientes sin depender de un token interno.
```html
Borde superior slate 800
```
Resultado: borde superior slate 800
Úsalo cuando necesites elegir un tono concreto de la paleta.
### Colores semánticos
Muted `.border-muted`
Inverse `.border-inverse`
Primary `.border-primary`
Secondary `.border-secondary`
Success `.border-success`
Warning `.border-warning`
Danger `.border-danger`
Info `.border-info`
### Escala neutral
Neutral 900 `.border-900`
Neutral 800 `.border-800`
Neutral 700 `.border-700`
Neutral 600 `.border-600`
Neutral 500 `.border-500`
Neutral 400 `.border-400`
Neutral 300 `.border-300`
Neutral 200 `.border-200`
Neutral 100 `.border-100`
Neutral 50 `.border-50`
### Valores especiales
Black `.border-black`
White `.border-white`
Current color `.border-current`
Transparent `.border-transparent`
Referencia
## Clases disponibles
Cada ejemplo muestra una composición completa. Lee las clases de izquierda a derecha: creación del borde, grosor, estilo, color y radio.
| Clases | Valores | Qué controla | Ejemplo completo | Cómo se interpreta |
| --- | --- | --- | --- | --- |
| .box-* | border , content , initial , inherit , unset , revert | Define cómo se calculan el ancho y el alto del elemento. | Contenido
| .box-border incluye padding y borde dentro de las dimensiones declaradas. |
| .border .border-{eje\|lado} | Todos los lados, ejes x / y o lados t , r , b , l | Crea un borde base de 1px y estilo sólido, sin fijar su color. | Contenido
| .border-t crea el borde superior y .border-t-primary cambia su color. |
| .border-{0…10} | 0px a 10px | Cambia el grosor de los cuatro lados; no crea por sí sola el estilo del borde. | Contenido
| .border crea el borde y .border-4 reemplaza su grosor por 4px. |
| .border-{lado}-{0…10} | t , r , b , l · 0px a 10px | Cambia el grosor de un lado concreto. | Contenido
| Crea solamente el borde inferior, lo lleva a 4px y aplica el color de peligro. |
| .border-{estilo} | solid , dashed , dotted , double , hidden , none | Modifica el patrón visual del trazo. | Contenido
| El borde se crea, aumenta a 3px, cambia a segmentado y recibe el color informativo. |
| .rounded-{valor} | 0px, 2px, 4px y luego 8px…100px | Redondea simultáneamente las cuatro esquinas. | Contenido
| .rounded-16 aplica 16px de radio a todo el elemento. |
| .rounded-{lado}-{valor} | Lados t , r , b , l · valores 4, 8, 12, 16, 20 | Redondea el par de esquinas perteneciente a un lado. | Contenido
| t afecta las dos esquinas superiores; en este caso ambas reciben 12px. |
| .rounded-s-{esquina}-{valor} | a superior izquierda, b superior derecha, c inferior derecha, d inferior izquierda | Redondea una única esquina. | Contenido
| a selecciona la esquina superior izquierda y 8 define un radio de 8px. |
| .border-{color} | Alias directo para todos los lados | Aplica el color de forma independiente a la estructura y al grosor. | Contenido
| El borde completo recibe directamente el color semántico de éxito. |
| .border-x-{color} | Eje horizontal: izquierda y derecha | Colorea ambos lados horizontales; no crea sus grosores ni estilos. | Contenido
| .border-l y .border-r crean los lados; el alias de eje colorea ambos. |
| .border-{lado}-{color} | t , r , b , l | Colorea solamente el lado indicado. | Contenido
| Crea el borde izquierdo, establece 4px y aplica el color de peligro sólo a ese lado. |
Responsive Las variantes responsivas están disponibles en ocho breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016.
Recomendaciones
## Buenas prácticas con bordes
01
### Compón responsabilidades
Declara por separado presencia, grosor, estilo, color y radio.
02
### Usa box-border
Incluye padding y borde dentro de las dimensiones declaradas del componente.
03
### Prefiere alias semánticos
Las clases de color semánticas mantienen consistencia entre temas y estados.
04
### Evita exceso visual
Usa grosores altos y bordes dobles sólo cuando exista una jerarquía clara.