0Pricing
CSS Academy · Lección

Estilos, ancho y color de bordes

Aplique bordes con distintos estilos, anchos y colores mediante propiedades abreviadas y detalladas.

Estilos, ancho y color de bordes es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

Abreviatura border

La abreviatura border establece los cuatro lados a la vez: ancho, estilo y color.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

Valores de border-style

Debe establecerse border-style para que aparezca un borde. Valores disponibles:

  • solid — línea continua
  • dashed — guiones largos
  • dotted — puntos redondos
  • double — dos líneas paralelas
  • groove/ridge/inset/outset — efectos tridimensionales
  • none — sin borde (valor predeterminado)

border-width

border-width acepta cualquier unidad de longitud o las palabras clave thin, medium, thick. Use números para obtener precisión.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color acepta cualquier valor de color CSS, incluido RGBA para la transparencia. currentColor hereda el color del texto.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Bordes de lados individuales

Establezca bordes en lados específicos mediante propiedades de forma larga:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius redondea las esquinas de los elementos. Use un solo valor para un redondeo uniforme o hasta cuatro valores para controlar cada esquina.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

border-radius elíptico

Cada radio de esquina puede tener dos valores separados por / para crear un redondeo elíptico asimétrico:

<div class="leaf"></div>

border-image

border-image reemplaza el borde por una imagen dividida en secciones o por un degradado, lo que permite crear bordes decorativos:

<div class="fancy">Gradient border image</div>

outline frente a border

outline dibuja una línea fuera del borde. A diferencia de border, no afecta al diseño ni a las dimensiones del elemento. Se usa habitualmente como indicador de foco del teclado.

<button class="focus-demo">Focused Button (demo)</button>

Eliminar outline: úselo con cuidado

Nunca elimine los contornos de :focus sin proporcionar un indicador de foco visible alternativo. Eliminar los estilos de foco perjudica a los usuarios de teclado y de lectores de pantalla.

<button>Button without outline</button>
<a href="#">Link without outline</a>

border-collapse para tablas

En las tablas HTML, border-collapse: collapse fusiona los bordes de celdas adyacentes en una sola línea para ofrecer una apariencia más limpia.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Comprobación rápida

¿Qué propiedad de CSS dibuja una línea fuera del borde sin afectar al diseño del elemento?

Resumen

La abreviatura border establece el ancho, el estilo y el color. border-radius redondea las esquinas. outline es independiente del borde: no afecta al diseño y es esencial como indicador de foco para la accesibilidad mediante teclado.

Preguntas frecuentes

¿La lección «Estilos, ancho y color de bordes» es gratis?

Sí — el texto completo de «Estilos, ancho y color de bordes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estilos, ancho y color de bordes»?

Aplique bordes con distintos estilos, anchos y colores mediante propiedades abreviadas y detalladas. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Estilos, ancho y color de bordes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Comprender width, height, margin y padding
  2. Estilos, ancho y color de bordes
  3. Box-Sizing: Content-Box frente a Border-Box
  4. Outline y Box-Shadow
← Volver a CSS Academy