EasyCode365EasyCode365

Fondos y bordes

Los fondos y bordes hacen que los elementos HTML simples se vean más visuales y organizados.

Puedes usarlos para crear tarjetas, avisos, botones, cajas de perfil y secciones de página. Un color de fondo simple o un borde puede hacer que el contenido sea mucho más fácil de escanear.

En esta lección aprenderás a dar estilo a fondos, imágenes de fondo, líneas de borde y esquinas redondeadas.

Qué hacen los fondos y los bordes

Un fondo se coloca detrás del contenido de un elemento.

Por defecto, el fondo es visible detrás del contenido, el padding y el área del borde. No llena el margin, porque el margin es espacio transparente fuera del elemento.

Un borde es una línea alrededor del elemento.

Por defecto, los bordes se suman al tamaño final del elemento. Si usas box-sizing: border-box, el borde queda incluido dentro del ancho que defines.

Se puede editar
<div class="box-demo">
  <div class="demo-box content-box">content-box</div>
  <div class="demo-box border-box">border-box</div>
</div>

<style>
  .box-demo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-family: Arial, sans-serif;
  }

  .demo-box {
    width: 160px;
    padding: 20px;
    border: 6px solid royalblue;
    background-color: lightblue;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>

Ambas cajas usan width: 160px, pero el ejemplo con content-box se vuelve más ancho cuando se suman el padding y el borde. El ejemplo con border-box mantiene la caja visible final en el ancho que escribiste.

Colores de fondo

La propiedad background-color establece un color sólido detrás de un elemento.

Puedes usar cualquier formato de color válido en CSS, como un nombre de color, código hex, valor RGB o valor HSL.

Se puede editar
<div class="alert-box">Recuerda guardar tu trabajo.</div>

<style>
  .alert-box {
    padding: 16px;
    background-color: lightyellow;
    font-family: Arial, sans-serif;
  }
</style>

Elige un color de fondo que mantenga el texto fácil de leer. Texto claro sobre un fondo claro, o texto oscuro sobre un fondo oscuro, puede ser difícil de ver.

Imágenes de fondo

La propiedad background-image coloca una imagen detrás de un elemento.

Usa la función url() para decirle al navegador dónde está el archivo de imagen.

Se puede editar
<section class="hero-section">
  <h2>Club de senderismo de fin de semana</h2>
</section>

<style>
  .hero-section {
    padding: 40px;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
  }
</style>

La ruta de la imagen puede ser una ruta de archivo local o una URL completa.

Recuerda: si olvidas url(), la imagen de fondo no funcionará.

Comportamiento de repetición del fondo

Por defecto, una imagen de fondo se repite.

Esto significa que el navegador coloca la imagen una y otra vez hasta llenar el elemento.

Usa background-repeat para controlar ese comportamiento:

  • repeat: repite la imagen horizontal y verticalmente
  • no-repeat: muestra la imagen una sola vez
  • repeat-x: repite la imagen solo de izquierda a derecha
  • repeat-y: repite la imagen solo de arriba abajo
Se puede editar
<div class="repeat-demo">
  <div class="pattern-box repeat-pattern">repeat</div>
  <div class="pattern-box single-pattern">no-repeat</div>
</div>

<style>
  .repeat-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .pattern-box {
    width: 140px;
    height: 90px;
    padding: 12px;
    border: 1px solid #ccc;
    background-image: radial-gradient(circle, #2563eb 3px, transparent 4px);
    background-size: 24px 24px;
  }

  .repeat-pattern {
    background-repeat: repeat;
  }

  .single-pattern {
    background-repeat: no-repeat;
  }
</style>

Los patrones pequeños pueden verse bien con repeat. Las fotos y los logos normalmente necesitan no-repeat.

Posición y tamaño del fondo

Cuando una imagen de fondo no se repite, empieza en la esquina superior izquierda por defecto.

La propiedad background-position mueve la imagen dentro del elemento.

Se puede editar
<div class="logo-box">Imagen colocada a la derecha.</div>

<style>
  .logo-box {
    width: 320px;
    padding: 32px 120px 32px 20px;
    border: 1px solid #ccc;
    background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=120&auto=format&fit=crop");
    background-repeat: no-repeat;
    background-position: center right;
    font-family: Arial, sans-serif;
  }
</style>

Algunos valores útiles de posición son top, bottom, left, right y center.

La propiedad background-size controla qué tan grande aparece la imagen.

  • cover: llena todo el elemento, pero puede recortar parte de la imagen
  • contain: muestra toda la imagen, pero puede dejar espacio vacío
Se puede editar
<div class="banner-demo">
  <div class="banner cover-banner">cover</div>
  <div class="banner contain-banner">contain</div>
</div>

<style>
  .banner-demo {
    display: flex;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .banner {
    width: 180px;
    height: 120px;
    display: grid;
    place-items: center;
    color: white;
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop");
    background-position: center;
    background-repeat: no-repeat;
    font-weight: bold;
  }

  .cover-banner {
    background-size: cover;
  }

  .contain-banner {
    background-size: contain;
    background-color: #1f2937;
  }
</style>

Usa cover cuando la imagen debe llenar la caja. Usa contain cuando ver la imagen completa importa más que llenar la caja.

Ancho, estilo y color del borde

Un borde tiene tres partes principales:

  • ancho: qué tan gruesa es la línea
  • estilo: qué tipo de línea es
  • color: qué color tiene la línea

La mayoría de desarrolladores usa la abreviatura border:

Se puede editar
<div class="card">Esta tarjeta tiene un borde.</div>

<style>
  .card {
    padding: 20px;
    border: 2px solid black;
    font-family: Arial, sans-serif;
  }
</style>

Esto significa:

  • 2px: ancho del borde
  • solid: estilo del borde
  • black: color del borde

El estilo del borde es obligatorio. Si escribes border: 2px black;, el borde no aparecerá porque falta el estilo.

Estilos de borde

Los estilos de borde más comunes son:

  • solid: una línea continua
  • dashed: segmentos de línea cortos
  • dotted: puntos pequeños
  • none: sin borde
Se puede editar
<div class="coupon">Ahorra 20%</div>

<style>
  .coupon {
    display: inline-block;
    padding: 16px 24px;
    border: 2px dashed green;
    font-family: Arial, sans-serif;
  }
</style>

Usa los estilos de borde con cuidado. Un borde solid normalmente es el más fácil de leer.

Border radius

La propiedad border-radius redondea las esquinas de un elemento.

Se puede editar
<button class="rounded-button">Guardar cambios</button>

<style>
  .rounded-button {
    padding: 10px 16px;
    border: 2px solid blue;
    border-radius: 8px;
    background-color: white;
    font-family: Arial, sans-serif;
  }
</style>

Un valor pequeño, como 6px u 8px, crea esquinas ligeramente redondeadas.

Un valor grande puede crear una forma de píldora, especialmente en botones.

Se puede editar
<button class="pill-button">Continuar</button>

<style>
  .pill-button {
    padding: 10px 24px;
    border: 2px solid purple;
    border-radius: 999px;
    background-color: lavender;
    font-family: Arial, sans-serif;
  }
</style>

Los valores muy grandes de border-radius no siempre crean un círculo perfecto. La forma final depende del ancho y alto del elemento.

Usa border-radius: 50% cuando quieras crear un círculo a partir de un elemento cuadrado:

Se puede editar
<div class="circle">CSS</div>

<style>
  .circle {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 3px solid #2563eb;
    border-radius: 50%;
    background-color: #dbeafe;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }
</style>

El ancho y el alto son iguales, así que 50% crea un círculo. Si el elemento fuera más ancho que alto, el mismo valor crearía un óvalo.

Ejemplo ejecutable: tarjeta de perfil

Este ejemplo combina un color de fondo, una imagen de fondo, un borde y border radius.

Prueba cambiar background-size: cover; por background-size: contain; y ejecuta el ejemplo otra vez.

Se puede editar
<div class="profile-card">
  <h2>Estudiante de CSS</h2>
  <p>Aprendiendo cómo los fondos y bordes dan forma a un diseño.</p>
</div>

<style>
  .profile-card {
    box-sizing: border-box;
    width: 320px;
    padding: 24px;
    border: 4px solid #facc15;
    border-radius: 16px;
    background-color: #1d4ed8;
    background-image: url("https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=800&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    font-family: Arial, sans-serif;
  }

  .profile-card h2 {
    margin-top: 0;
  }
</style>

La imagen de fondo llena la tarjeta, el borde la enmarca y las esquinas redondeadas suavizan la forma.

El background-color sigue siendo útil. Funciona como color de respaldo mientras la imagen carga o si la imagen no puede cargarse.

Errores comunes de principiantes

  • Olvidar url(): escribe background-image: url("photo.jpg");, no background-image: "photo.jpg";.
  • Usar imágenes enormes: las imágenes muy grandes pueden hacer que las páginas carguen lentamente.
  • Esperar que no se repita por defecto: las imágenes de fondo se repiten a menos que definas background-repeat: no-repeat;.
  • Olvidar el estilo del borde: border: 2px black; no se mostrará porque le falta solid, dashed u otro estilo.
  • Usar demasiado border radius: los valores muy grandes pueden crear óvalos o formas de píldora inesperadas.
  • Usar poco contraste: una imagen de fondo muy cargada puede hacer que el texto sea difícil de leer.

Mini tarea

Ejecuta este ejemplo de botón:

Se puede editar
<button>Comprobar respuesta</button>

<style>
  button {
    border: 4px dotted green;
  }
</style>

¿Cuál es el ancho, estilo y color del borde?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Qué valor de background-size llena todo el elemento, aunque se recorte parte de la imagen?
  2. ¿Un color de fondo llena el área del margin?
  3. ¿Qué ocurre si olvidas el estilo en la abreviatura border?

Respuestas:

  1. cover.
  2. No. El margin es transparente.
  3. El borde no aparecerá.

Respuesta de la mini tarea: el ancho es 4px, el estilo es dotted y el color es green.

Pequeño desafío

Da estilo a la caja de alerta de abajo.

Tus objetivos:

  • Añadir un color de fondo rojo claro.
  • Añadir un borde rojo oscuro sólido de 3px.
  • Redondear las esquinas con 6px.
Se puede editar
<div class="alert-box">
  <h3>Advertencia</h3>
  <p>Revisa tu contraseña e inténtalo de nuevo.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
  }
</style>

Una posible solución:

Se puede editar
<div class="alert-box">
  <h3>Advertencia</h3>
  <p>Revisa tu contraseña e inténtalo de nuevo.</p>
</div>

<style>
  .alert-box {
    padding: 20px;
    font-family: sans-serif;
    background-color: lightpink;
    border: 3px solid darkred;
    border-radius: 6px;
  }
</style>

Resumen

  • background-color establece un color sólido detrás de un elemento.
  • background-image añade una imagen con url().
  • background-repeat controla si una imagen de fondo se repite.
  • background-position mueve una imagen de fondo dentro del elemento.
  • background-size controla qué tan grande aparece la imagen de fondo.
  • cover llena toda la caja, pero puede recortar la imagen.
  • contain muestra toda la imagen, pero puede dejar espacio vacío.
  • border puede establecer ancho, estilo y color en una sola línea.
  • border-radius redondea las esquinas de un elemento.