El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Borde y Contorno

Siguiente ►
►

En esta lección, aprenderemos sobre las propiedades de borde y contorno en CSS. Estas propiedades son fundamentales para definir el aspecto visual de los elementos en una página web, permitiendo agregar bordes y contornos que pueden mejorar la estética y la usabilidad del diseño.

Conceptos Clave

Borde (Border)

El borde es la línea que rodea el contenido y el padding de un elemento. Se puede personalizar en términos de grosor, estilo y color.

Contorno (Outline)

El contorno es similar al borde, pero no afecta el tamaño del elemento ni su posición. Se dibuja fuera del borde y puede ser útil para resaltar elementos, especialmente en términos de accesibilidad.

Propiedades del Borde

border-width

Define el grosor del borde. Puede especificarse en unidades de longitud (px, em, rem, etc.) o mediante palabras clave (thin, medium, thick).

/* Ejemplo de border-width */
.elemento {
    border-width: 2px;
}

border-style

Define el estilo del borde. Los valores comunes incluyen solid, dashed, dotted, double, entre otros.

/* Ejemplo de border-style */
.elemento {
    border-style: solid;
}

border-color

Define el color del borde. Puede especificarse en cualquier formato de color válido en CSS (nombre de color, hexadecimal, RGB, etc.).

/* Ejemplo de border-color */
.elemento {
    border-color: #3498db;
}

border

Es una propiedad abreviada que permite definir el grosor, estilo y color del borde en una sola línea.

/* Ejemplo de propiedad abreviada border */
.elemento {
    border: 2px solid #3498db;
}

Propiedades Individuales del Borde

Puedes definir bordes específicos para cada lado del elemento: border-top, border-right, border-bottom, border-left.

/* Ejemplo de propiedades individuales del borde */
.elemento {
    border-top: 2px solid #3498db;
    border-right: 2px dashed #e74c3c;
    border-bottom: 2px dotted #2ecc71;
    border-left: 2px double #9b59b6;
}

Propiedades del Contorno

outline-width

Define el grosor del contorno.

/* Ejemplo de outline-width */
.elemento {
    outline-width: 2px;
}

outline-style

Define el estilo del contorno.

/* Ejemplo de outline-style */
.elemento {
    outline-style: dashed;
}

outline-color

Define el color del contorno.

/* Ejemplo de outline-color */
.elemento {
    outline-color: #e74c3c;
}

outline

Es una propiedad abreviada que permite definir el grosor, estilo y color del contorno en una sola línea.

/* Ejemplo de propiedad abreviada outline */
.elemento {
    outline: 2px dashed #e74c3c;
}

outline-offset

Define la distancia entre el contorno y el borde del elemento.

/* Ejemplo de outline-offset */
.elemento {
    outline-offset: 5px;
}

Ejemplo Práctico

Vamos a aplicar lo aprendido en un ejemplo práctico. Supongamos que queremos estilizar un botón con un borde sólido y un contorno punteado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Borde y Contorno</title>
    <style>
        .boton {
            padding: 10px 20px;
            border: 2px solid #3498db;
            outline: 2px dotted #e74c3c;
            outline-offset: 5px;
            background-color: #ecf0f1;
            color: #2c3e50;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="boton">Haz clic aquí</button>
</body>
</html>

Ejercicios Prácticos

Ejercicio 1

Crea un div con un borde de 3px de grosor, estilo dashed y color #2ecc71. Además, agrega un contorno de 2px de grosor, estilo solid y color #e74c3c con un desplazamiento de 10px.

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 1</title>
    <style>
        .caja {
            width: 200px;
            height: 100px;
            border: 3px dashed #2ecc71;
            outline: 2px solid #e74c3c;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div class="caja"></div>
</body>
</html>

Ejercicio 2

Crea un párrafo con un borde superior de 4px de grosor, estilo solid y color #9b59b6, y un borde inferior de 2px de grosor, estilo dotted y color #3498db.

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 2</title>
    <style>
        .parrafo {
            border-top: 4px solid #9b59b6;
            border-bottom: 2px dotted #3498db;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p class="parrafo">Este es un párrafo con bordes personalizados.</p>
</body>
</html>

Conclusión

En esta lección, hemos aprendido cómo utilizar las propiedades de borde y contorno en CSS para mejorar el diseño de nuestros elementos. Estas propiedades nos permiten agregar detalles visuales importantes que pueden hacer que nuestros sitios web sean más atractivos y accesibles. En la próxima lección, exploraremos cómo manejar el ancho y alto de los elementos en CSS.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados