CSS
Tutorial CSS: Bordes y contornos
Aprende a usar bordes, contornos, border-radius y border-image en CSS para crear diseños web atractivos y funcionales con ejemplos prácticos.
Aprende CSS y certifícatePropiedades border-width, border-style y border-color
Los bordes son elementos fundamentales en el diseño CSS que permiten definir líneas alrededor de los elementos HTML. Estas líneas pueden personalizarse en términos de grosor, estilo y color para crear diferentes efectos visuales y mejorar la estructura de la página.
Propiedad border-width
La propiedad border-width determina el grosor del borde. Podemos especificar este valor utilizando diferentes unidades de medida:
/* Valores con unidades específicas */
.box {
border-width: 2px; /* Píxeles (común) */
border-width: 0.2em; /* Relativo al tamaño de fuente */
border-width: 0.2rem; /* Relativo al tamaño de fuente del elemento raíz */
border-width: 3pt; /* Puntos */
}
También podemos usar valores predefinidos:
.box {
border-width: thin; /* Generalmente 1px */
border-width: medium; /* Generalmente 3px (valor por defecto) */
border-width: thick; /* Generalmente 5px */
}
Una característica importante de border-width es que permite definir diferentes grosores para cada lado del elemento:
/* Sintaxis con 4 valores: arriba, derecha, abajo, izquierda (sentido horario) */
.box {
border-width: 1px 2px 3px 4px;
}
/* Sintaxis con 3 valores: arriba, (izquierda y derecha), abajo */
.box {
border-width: 1px 2px 3px;
}
/* Sintaxis con 2 valores: (arriba y abajo), (izquierda y derecha) */
.box {
border-width: 1px 2px;
}
También podemos definir el grosor para cada lado individualmente:
.box {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
}
Propiedad border-style
La propiedad border-style define el tipo de línea que se utilizará para el borde. Esta propiedad es obligatoria para que el borde sea visible, ya que el valor por defecto es none
(sin borde).
Los valores más comunes son:
.box-1 {
border-style: solid; /* Línea continua (muy común) */
}
.box-2 {
border-style: dashed; /* Línea discontinua con guiones */
}
.box-3 {
border-style: dotted; /* Línea de puntos */
}
.box-4 {
border-style: double; /* Línea doble */
}
.box-5 {
border-style: none; /* Sin borde (valor por defecto) */
}
Otros valores menos utilizados pero disponibles:
.box {
border-style: groove; /* Efecto 3D de surco */
border-style: ridge; /* Efecto 3D de cresta */
border-style: inset; /* Efecto 3D hundido */
border-style: outset; /* Efecto 3D elevado */
border-style: hidden; /* Similar a none, pero gana en conflictos de bordes en tablas */
}
Al igual que con border-width, podemos aplicar diferentes estilos a cada lado:
/* Diferentes estilos para cada lado (arriba, derecha, abajo, izquierda) */
.box {
border-style: solid dashed dotted double;
}
/* También podemos definir estilos individuales por lado */
.box {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}
Propiedad border-color
La propiedad border-color define el color del borde. Podemos especificar colores de varias formas:
.box {
/* Nombres de colores */
border-color: red;
/* Valores hexadecimales */
border-color: #FF0000; /* Formato largo */
border-color: #F00; /* Formato abreviado */
/* RGB y RGBA (con transparencia) */
border-color: rgb(255, 0, 0);
border-color: rgba(255, 0, 0, 0.5); /* 50% de transparencia */
/* HSL y HSLA */
border-color: hsl(0, 100%, 50%);
border-color: hsla(0, 100%, 50%, 0.5);
}
Si no se especifica un border-color, el borde tomará el color del texto del elemento (propiedad color
).
También podemos definir colores diferentes para cada lado:
/* Diferentes colores para cada lado (arriba, derecha, abajo, izquierda) */
.box {
border-color: red green blue yellow;
}
/* O individualmente */
.box {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
Combinando las propiedades
Aunque podemos definir cada propiedad por separado, CSS nos permite combinarlas de forma más concisa:
/* Definiendo todas las propiedades a la vez con la propiedad abreviada border */
.box {
border: 2px solid red; /* width style color */
}
/* También podemos definir bordes específicos para cada lado */
.box {
border-top: 1px dashed blue;
border-right: 2px solid green;
border-bottom: 3px dotted orange;
border-left: 4px double purple;
}
Ejemplo práctico
Veamos un ejemplo completo que muestra diferentes combinaciones de estas propiedades:
.container {
width: 300px;
padding: 20px;
background-color: #f5f5f5;
}
.box-1 {
padding: 15px;
margin-bottom: 20px;
background-color: white;
border-width: 3px;
border-style: solid;
border-color: #3498db;
}
.box-2 {
padding: 15px;
margin-bottom: 20px;
background-color: white;
border: 2px dashed #e74c3c;
}
.box-3 {
padding: 15px;
background-color: white;
border-top: 5px dotted #2ecc71;
border-right: 2px solid #f1c40f;
border-bottom: 4px double #9b59b6;
border-left: 3px dashed #e67e22;
}
HTML correspondiente:
<div class="container">
<div class="box-1">Borde sólido azul de 3px</div>
<div class="box-2">Borde discontinuo rojo de 2px</div>
<div class="box-3">Bordes diferentes en cada lado</div>
</div>
Este ejemplo crea tres cajas con diferentes estilos de borde:
- La primera tiene un borde sólido azul de 3px en todos los lados
- La segunda tiene un borde discontinuo rojo de 2px en todos los lados
- La tercera tiene un borde diferente en cada lado (estilo, color y grosor)
Consideraciones importantes
- Si alguna de las propiedades (border-width, border-style o border-color) no se especifica, se utilizará su valor por defecto.
- El border-style es obligatorio para que el borde sea visible, ya que su valor por defecto es
none
. - Los bordes afectan al tamaño total del elemento según el modelo de caja que se esté utilizando (content-box o border-box).
- Para crear bordes más complejos o con efectos especiales, se pueden combinar estas propiedades con otras como box-shadow o utilizar múltiples elementos.
Dominar estas tres propiedades básicas de bordes te permitirá crear diseños más estructurados y visualmente atractivos en tus proyectos web.
Bordes redondeados con border-radius y valores individuales
Los bordes redondeados son un elemento de diseño muy popular en interfaces modernas que permiten suavizar las esquinas de los elementos HTML. CSS nos ofrece la propiedad border-radius
para crear estos efectos de forma sencilla y flexible.
Uso básico de border-radius
La propiedad border-radius permite redondear las esquinas de un elemento especificando el radio de la curva. Cuanto mayor sea el valor, más redondeada será la esquina:
.box {
width: 200px;
height: 100px;
background-color: #3498db;
border: 2px solid #2980b9;
/* Redondea todas las esquinas con un radio de 10px */
border-radius: 10px;
}
Podemos usar diferentes unidades de medida para definir el radio:
.box {
/* Usando diferentes unidades */
border-radius: 10px; /* Píxeles (común) */
border-radius: 1em; /* Relativo al tamaño de fuente */
border-radius: 10%; /* Porcentaje del tamaño del elemento */
border-radius: 0.5rem; /* Relativo al tamaño de fuente del elemento raíz */
}
Valores individuales para cada esquina
Una de las características más potentes de border-radius
es la posibilidad de especificar diferentes radios para cada esquina. El orden sigue el patrón de las agujas del reloj, comenzando por la esquina superior izquierda:
/* Sintaxis: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda */
.box {
border-radius: 10px 20px 30px 40px;
}
También podemos usar sintaxis abreviadas:
/* Dos valores: (superior-izquierda e inferior-derecha) (superior-derecha e inferior-izquierda) */
.box {
border-radius: 10px 20px;
}
/* Tres valores: superior-izquierda, (superior-derecha e inferior-izquierda), inferior-derecha */
.box {
border-radius: 10px 20px 30px;
}
Propiedades específicas para cada esquina
Si preferimos un enfoque más explícito, podemos usar propiedades individuales para cada esquina:
.box {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
Este enfoque es especialmente útil cuando necesitamos modificar una esquina específica en ciertos estados o mediante JavaScript.
Radios elípticos
Una característica menos conocida pero muy útil de border-radius
es la posibilidad de crear esquinas elípticas especificando dos valores para cada radio (horizontal y vertical):
/* Sintaxis: horizontal/vertical */
.box {
/* Todas las esquinas tendrán 20px horizontal y 10px vertical */
border-radius: 20px/10px;
}
También podemos combinar radios elípticos con valores individuales para cada esquina:
/* Radios horizontales y verticales diferentes para cada esquina */
.box {
/* Horizontal: 10px 20px 30px 40px / Vertical: 5px 10px 15px 20px */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}
Para las propiedades individuales, la sintaxis es:
.box {
border-top-left-radius: 10px 5px; /* horizontal vertical */
border-top-right-radius: 20px 10px;
border-bottom-right-radius: 30px 15px;
border-bottom-left-radius: 40px 20px;
}
Casos de uso prácticos
1. Botones con esquinas redondeadas
Los botones con esquinas redondeadas son un elemento común en interfaces modernas:
.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #2980b9;
}
2. Tarjetas con bordes redondeados
Las tarjetas con esquinas redondeadas son populares en diseños de tipo "card":
.card {
width: 300px;
padding: 20px;
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
3. Imágenes redondeadas
Podemos aplicar border-radius
a imágenes para crear diferentes efectos:
/* Imagen con esquinas ligeramente redondeadas */
.rounded-image {
border-radius: 10px;
}
/* Imagen circular (funciona mejor con imágenes cuadradas) */
.circle-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover; /* Mantiene la proporción de la imagen */
}
4. Pestañas con esquinas redondeadas superiores
Para crear pestañas con solo las esquinas superiores redondeadas:
.tab {
display: inline-block;
padding: 10px 20px;
background-color: #f1f1f1;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab.active {
background-color: white;
border-top: 2px solid #3498db;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: none;
}
5. Diseño con esquina única redondeada
Para crear diseños más creativos, podemos redondear solo una esquina:
.creative-box {
width: 200px;
height: 100px;
background-color: #9b59b6;
/* Solo redondea la esquina superior derecha */
border-top-right-radius: 30px;
}
Ejemplo completo
Veamos un ejemplo que muestra diferentes aplicaciones de border-radius
:
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #f5f5f5;
}
.box {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
}
.box-1 {
background-color: #3498db;
border-radius: 10px;
}
.box-2 {
background-color: #e74c3c;
border-radius: 10px 30px;
}
.box-3 {
background-color: #2ecc71;
border-radius: 10px 30px 50px;
}
.box-4 {
background-color: #f39c12;
border-radius: 10px 30px 50px 70px;
}
.box-5 {
background-color: #9b59b6;
border-radius: 50%;
}
.box-6 {
background-color: #1abc9c;
border-radius: 30px/15px;
}
HTML correspondiente:
<div class="container">
<div class="box box-1">Todas las esquinas iguales</div>
<div class="box box-2">Dos valores</div>
<div class="box box-3">Tres valores</div>
<div class="box box-4">Cuatro valores</div>
<div class="box box-5">Círculo (50%)</div>
<div class="box box-6">Elíptico (30px/15px)</div>
</div>
Consideraciones importantes
- Cuando se aplica
border-radius
a un elemento conborder
, el borde sigue la curva definida por el radio. - Para crear un círculo perfecto, el elemento debe ser cuadrado (mismo ancho y alto) y usar
border-radius: 50%
. - Los valores de
border-radius
no deben ser excesivamente grandes para elementos pequeños, ya que pueden distorsionar la forma. - En navegadores modernos,
border-radius
tiene buen soporte, pero en proyectos que requieran compatibilidad con navegadores muy antiguos, puede ser necesario usar prefijos como-webkit-border-radius
o-moz-border-radius
. - Combinar
border-radius
con otras propiedades comooverflow: hidden
permite crear máscaras para contenido interno, como recortar imágenes en formas redondeadas.
La propiedad border-radius
es una herramienta sencilla pero potente que puede mejorar significativamente la estética de tus diseños web con muy poco código.
Diferencias entre border y outline en el flujo del documento
Los bordes y los contornos son elementos visuales que pueden aplicarse a elementos HTML, pero funcionan de manera fundamentalmente diferente en cuanto a cómo afectan al flujo del documento y al espacio que ocupan los elementos.
Comportamiento básico
La principal diferencia entre border
y outline
radica en cómo interactúan con el modelo de caja y el flujo del documento:
- Border: Forma parte del modelo de caja estándar, ocupa espacio y afecta a las dimensiones totales del elemento.
- Outline: Se dibuja por encima del elemento sin afectar sus dimensiones ni el flujo del documento.
.box-with-border {
width: 200px;
height: 100px;
background-color: #3498db;
border: 5px solid #e74c3c;
/* El tamaño total será 210px × 110px */
}
.box-with-outline {
width: 200px;
height: 100px;
background-color: #3498db;
outline: 5px solid #e74c3c;
/* El tamaño total seguirá siendo 200px × 100px */
}
Impacto en el flujo del documento
Esta diferencia fundamental tiene importantes implicaciones en el diseño:
.container {
width: 300px;
background-color: #f5f5f5;
padding: 20px;
}
.box {
width: 100%;
height: 50px;
margin-bottom: 10px;
background-color: #3498db;
}
.box-with-border {
border: 5px solid #e74c3c;
/* Empuja otros elementos y puede causar desbordamiento */
}
.box-with-outline {
outline: 5px solid #e74c3c;
/* No empuja otros elementos ni causa desbordamiento */
}
En este ejemplo, el elemento con border
ocupará más espacio y empujará los elementos siguientes, mientras que el elemento con outline
mantendrá el flujo original del documento.
Características específicas de outline
La propiedad outline
tiene algunas características únicas:
- No acepta radios redondeados: A diferencia de
border
, no se puede usarborder-radius
para redondear los contornos. - No se puede aplicar a lados individuales: Mientras que con
border
podemos estilizar cada lado por separado,outline
se aplica a todo el perímetro del elemento. - Puede ser no rectangular: En algunos navegadores,
outline
sigue la forma exacta del elemento, incluso si no es rectangular.
/* Con border podemos estilizar cada lado individualmente */
.box-with-border {
border-top: 2px solid red;
border-right: 3px dashed blue;
border-bottom: 4px dotted green;
border-left: 5px double orange;
}
/* Con outline no podemos hacer esto */
.box-with-outline {
/* Esto no funciona como con border */
outline-top: 2px solid red; /* Propiedad no válida */
outline-right: 3px dashed blue; /* Propiedad no válida */
}
/* Outline se aplica a todo el perímetro */
.box-with-outline {
outline: 3px solid purple;
}
Propiedad outline-offset
Una característica única de outline
es la propiedad outline-offset
, que permite crear un espacio entre el borde del elemento y su contorno:
.box {
width: 200px;
height: 100px;
background-color: #3498db;
border: 2px solid #2980b9;
outline: 3px dashed #e74c3c;
outline-offset: 5px; /* Crea un espacio de 5px entre el borde y el contorno */
}
Esta propiedad permite crear efectos visuales interesantes que no son posibles solo con border
:
.focus-effect {
border: 1px solid #ddd;
transition: outline-offset 0.3s, outline-color 0.3s;
outline: 2px solid transparent;
outline-offset: 0;
}
.focus-effect:focus {
outline-color: #3498db;
outline-offset: 3px;
}
Casos de uso prácticos
Estas diferencias hacen que cada propiedad sea más adecuada para ciertos casos de uso:
Casos ideales para border
- Elementos con dimensiones precisas: Cuando necesitas controlar exactamente el tamaño total del elemento.
- Diseños con bordes decorativos: Cuando el borde es parte integral del diseño visual.
- Elementos con esquinas redondeadas: Cuando necesitas aplicar
border-radius
.
.card {
width: 300px;
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
Casos ideales para outline
- Indicadores de foco: Para mostrar qué elemento tiene el foco sin alterar el layout.
- Destacar elementos temporalmente: Cuando quieres resaltar un elemento sin mover otros.
- Depuración de layouts: Para visualizar elementos sin afectar su posicionamiento.
/* Estilo de foco personalizado */
button:focus {
outline: 3px solid #3498db;
outline-offset: 2px;
}
/* Destacar un elemento al pasar el ratón sin afectar el layout */
.highlight-on-hover:hover {
outline: 2px dashed #e74c3c;
}
/* Depuración de layouts */
.debug-layout * {
outline: 1px solid rgba(255, 0, 0, 0.2);
}
Comportamiento con box-sizing
La propiedad box-sizing
afecta a border
pero no a outline
:
.box {
width: 200px;
height: 100px;
padding: 20px;
}
.content-box {
box-sizing: content-box;
border: 10px solid #3498db;
/* Tamaño total: 260px × 160px (width + padding*2 + border*2) */
}
.border-box {
box-sizing: border-box;
border: 10px solid #3498db;
/* Tamaño total: 200px × 100px (border y padding se incluyen dentro) */
}
.with-outline {
box-sizing: border-box;
border: 5px solid #3498db;
outline: 10px solid #e74c3c;
/* El outline no afecta al tamaño independientemente del box-sizing */
}
Ejemplo comparativo completo
Veamos un ejemplo que muestra claramente las diferencias entre border
y outline
:
.container {
display: flex;
flex-direction: column;
gap: 20px;
width: 400px;
padding: 20px;
background-color: #f5f5f5;
}
.row {
display: flex;
gap: 20px;
}
.box {
width: 150px;
height: 80px;
background-color: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.with-border {
border: 10px solid #e74c3c;
}
.with-outline {
outline: 10px solid #e74c3c;
}
.with-both {
border: 5px solid #2ecc71;
outline: 10px solid #e74c3c;
outline-offset: 5px;
}
HTML correspondiente:
<div class="container">
<div class="row">
<div class="box">Normal</div>
<div class="box with-border">Con border</div>
</div>
<div class="row">
<div class="box with-outline">Con outline</div>
<div class="box with-both">Border + outline</div>
</div>
</div>
Consideraciones de accesibilidad
El uso de outline
tiene importantes implicaciones para la accesibilidad:
- Los navegadores utilizan
outline
para mostrar el foco en elementos interactivos. - Eliminar completamente el outline (
outline: none
) sin proporcionar una alternativa visible puede crear problemas de accesibilidad para usuarios que navegan con teclado.
/* Antipatrón de accesibilidad */
button:focus {
outline: none; /* Elimina la indicación visual de foco */
}
/* Mejor enfoque: personalizar en lugar de eliminar */
button:focus {
outline: 3px solid #3498db;
outline-offset: 2px;
}
Soporte en navegadores
Tanto border
como outline
tienen buen soporte en navegadores modernos, pero hay algunas diferencias:
border
tiene soporte universal y consistente.outline
puede comportarse ligeramente diferente entre navegadores, especialmente con formas no rectangulares.outline-offset
tiene buen soporte en navegadores modernos, pero puede requerir prefijos en navegadores más antiguos.
Rendimiento
En términos de rendimiento:
border
puede desencadenar recálculos de layout cuando cambia, ya que afecta al tamaño y posición de los elementos.outline
generalmente tiene mejor rendimiento en animaciones y cambios dinámicos, ya que no provoca recálculos de layout.
/* Puede causar reflow (recálculo de layout) */
@keyframes animate-border {
0% { border-width: 1px; }
100% { border-width: 10px; }
}
/* No causa reflow, mejor rendimiento */
@keyframes animate-outline {
0% { outline-width: 1px; }
100% { outline-width: 10px; }
}
Entender estas diferencias fundamentales entre border
y outline
te permitirá elegir la propiedad más adecuada según tus necesidades específicas de diseño, rendimiento y accesibilidad.
Bordes con imágenes usando border-image
La propiedad border-image permite utilizar imágenes como bordes de elementos HTML, ofreciendo posibilidades de diseño mucho más creativas que los bordes tradicionales. Esta característica nos permite crear bordes decorativos, patrones complejos y efectos visuales únicos que serían imposibles de lograr con las propiedades básicas de bordes.
Estructura básica de border-image
La propiedad border-image
es una propiedad abreviada que engloba varias subpropiedades relacionadas con la aplicación de imágenes como bordes:
.box {
border: 15px solid transparent; /* Necesario para definir el ancho del borde */
border-image: source slice width outset repeat;
}
Veamos cada componente en detalle:
1. border-image-source
Esta propiedad define la imagen que se utilizará como borde. Puede ser una URL a un archivo de imagen o un gradiente:
.box {
border: 15px solid transparent;
border-image-source: url('border-pattern.png');
}
/* También podemos usar gradientes */
.box-gradient {
border: 15px solid transparent;
border-image-source: linear-gradient(to right, red, blue);
}
2. border-image-slice
La propiedad border-image-slice divide la imagen en nueve secciones (como una cuadrícula 3×3), definiendo cómo se cortará la imagen para aplicarla al borde:
.box {
border: 15px solid transparent;
border-image-source: url('border-pattern.png');
border-image-slice: 27; /* Un solo valor aplica a los cuatro lados */
}
Podemos especificar valores diferentes para cada lado:
/* Orden: superior, derecha, inferior, izquierda */
.box {
border-image-slice: 27 27 27 27;
}
/* Versión abreviada con 2 valores: (superior e inferior) (izquierda y derecha) */
.box {
border-image-slice: 27 27;
}
Los valores pueden ser números (sin unidades) o porcentajes:
.box {
border-image-slice: 30%; /* 30% de la imagen desde cada borde */
}
También podemos añadir la palabra clave fill
para que la imagen central se use como fondo:
.box {
border-image-slice: 27 fill;
}
3. border-image-width
Esta propiedad define el ancho de la imagen del borde. Si no se especifica, toma el valor de border-width
:
.box {
border: 15px solid transparent;
border-image-source: url('border-pattern.png');
border-image-slice: 27;
border-image-width: 20px; /* Ancho del borde de imagen */
}
También podemos usar valores relativos:
.box {
border-image-width: 1; /* 1 vez el ancho del borde */
border-image-width: 2.5; /* 2.5 veces el ancho del borde */
border-image-width: auto; /* Usa el valor de border-image-slice */
}
4. border-image-outset
Esta propiedad define cuánto debe extenderse la imagen del borde más allá del borde del elemento:
.box {
border: 15px solid transparent;
border-image-source: url('border-pattern.png');
border-image-slice: 27;
border-image-outset: 10px; /* La imagen se extiende 10px más allá del borde */
}
5. border-image-repeat
Esta propiedad define cómo se repite la imagen para cubrir el borde:
.box {
border-image-repeat: stretch; /* Estira la imagen (valor por defecto) */
}
.box-2 {
border-image-repeat: repeat; /* Repite la imagen, puede cortarla */
}
.box-3 {
border-image-repeat: round; /* Repite la imagen, ajustando su tamaño para evitar cortes */
}
.box-4 {
border-image-repeat: space; /* Repite la imagen, añadiendo espacio entre repeticiones */
}
También podemos especificar valores diferentes para los ejes horizontal y vertical:
.box {
border-image-repeat: round stretch; /* round para horizontal, stretch para vertical */
}
Sintaxis abreviada
La forma más común de usar border-image
es con la sintaxis abreviada:
.box {
border: 15px solid transparent;
border-image: url('border-pattern.png') 27 / 20px / 10px round;
/* source slice / width / outset repeat */
}
Si omitimos algún valor, se utilizará el valor por defecto:
.box {
border: 15px solid transparent;
border-image: url('border-pattern.png') 27 round;
/* Omitimos width y outset */
}
Ejemplos prácticos
1. Borde decorativo simple
.decorative-box {
width: 300px;
height: 200px;
padding: 20px;
background-color: #f9f9f9;
border: 20px solid transparent;
border-image: url('ornamental-border.png') 30 round;
}
2. Borde con gradiente
.gradient-border-box {
width: 300px;
height: 200px;
padding: 20px;
background-color: white;
border: 15px solid transparent;
border-image: linear-gradient(45deg, #f06, #9f6, #06f, #f06) 1 stretch;
}
3. Borde con esquinas personalizadas
.corner-box {
width: 300px;
height: 200px;
padding: 20px;
background-color: #f5f5f5;
border: 30px solid transparent;
border-image: url('corner-pattern.png') 30 30 round;
}
4. Tarjeta con marco fotográfico
.photo-frame {
width: 300px;
padding: 5px;
background-color: white;
border: 25px solid transparent;
border-image: url('frame-pattern.png') 50 fill / 25px / 0 stretch;
}
.photo-frame img {
width: 100%;
display: block;
}
HTML correspondiente:
<div class="photo-frame">
<img src="landscape.jpg" alt="Paisaje">
</div>
Creando imágenes de borde efectivas
Para crear bordes con imágenes efectivos, es importante entender cómo diseñar la imagen original:
Imágenes para bordes continuos: Deben ser diseñadas para que se repitan sin costuras visibles.
Imágenes para esquinas: Las esquinas deben ser diseñadas cuidadosamente para que se conecten bien con los bordes laterales.
Formato de archivo: Utiliza PNG para imágenes con transparencia o SVG para bordes escalables.
Tamaño: La imagen debe tener suficiente resolución para verse bien incluso cuando se estira.
Ejemplo de estructura de imagen para border-image
Una imagen ideal para border-image
suele tener esta estructura:
+-------+-------------+-------+
| | | |
| 1 | 2 | 3 |
| | | |
+-------+-------------+-------+
| | | |
| 4 | 5 | 6 |
| | | |
+-------+-------------+-------+
| | | |
| 7 | 8 | 9 |
| | | |
+-------+-------------+-------+
Donde:
- Las secciones 1, 3, 7 y 9 son las esquinas
- Las secciones 2, 4, 6 y 8 son los bordes
- La sección 5 es el centro (usado solo con
fill
)
Compatibilidad y consideraciones
Navegadores antiguos: Algunos navegadores antiguos pueden requerir prefijos como
-webkit-border-image
o-moz-border-image
.Fallback: Siempre es buena práctica proporcionar un
border
normal como fallback:
.box {
/* Fallback para navegadores que no soportan border-image */
border: 15px solid #ddd;
/* Versión con border-image */
border-image: url('border-pattern.png') 27 round;
}
Rendimiento: Las imágenes grandes pueden afectar al rendimiento, especialmente en dispositivos móviles. Optimiza tus imágenes y considera usar SVG para bordes escalables.
Responsive: Ten en cuenta que los bordes con imágenes pueden no escalar bien en diseños responsivos. Prueba tu diseño en diferentes tamaños de pantalla.
Ejemplo completo
Veamos un ejemplo completo que muestra diferentes aplicaciones de border-image
:
.container {
display: flex;
flex-wrap: wrap;
gap: 30px;
padding: 30px;
background-color: #f5f5f5;
}
.box {
width: 200px;
height: 150px;
padding: 20px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
}
.simple-border {
border: 15px solid transparent;
border-image: url('simple-border.png') 30 round;
}
.gradient-border {
border: 10px solid transparent;
border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
}
.fancy-corners {
border: 30px solid transparent;
border-image: url('corner-border.png') 30 30 / 30px round;
}
.fill-center {
border: 20px solid transparent;
border-image: url('pattern-border.png') 30 fill / 20px round;
}
HTML correspondiente:
<div class="container">
<div class="box simple-border">Borde simple con imagen</div>
<div class="box gradient-border">Borde con gradiente</div>
<div class="box fancy-corners">Esquinas decorativas</div>
<div class="box fill-center">Con relleno central</div>
</div>
Casos de uso recomendados
border-image
es especialmente útil para:
- Diseños temáticos: Bordes personalizados para sitios web con temas específicos (vintage, infantil, festivo).
- Marcos decorativos: Para enmarcar imágenes, certificados o contenido destacado.
- Botones y elementos UI: Para crear botones con estilos únicos y personalizados.
- Tarjetas y contenedores: Para añadir personalidad a tarjetas de producto o contenedores de información.
La propiedad border-image
ofrece posibilidades creativas que van mucho más allá de los bordes tradicionales, permitiéndote crear diseños únicos y personalizados que destacarán en tus proyectos web.
Ejercicios de esta lección Bordes y contornos
Evalúa tus conocimientos de esta lección Bordes y contornos con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender y aplicar las propiedades básicas de bordes: border-width, border-style y border-color.
- Aprender a crear bordes redondeados con border-radius y sus variantes individuales y elípticas.
- Diferenciar entre las propiedades border y outline y entender su impacto en el flujo del documento y accesibilidad.
- Utilizar la propiedad border-image para aplicar imágenes como bordes y conocer sus subpropiedades y sintaxis.
- Reconocer casos prácticos y consideraciones para el uso efectivo de bordes y contornos en diseño web.