Ejercicio 21 — Estilos de Bordes en CSS

En este ejercicio se practican diferentes propiedades de borde en CSS aplicadas a varias secciones de una página. Se trabajan estilos como dotted, solid y double, además de grosores personalizados, colores y esquinas redondeadas.

Enunciado

Crear tres secciones usando <div> con contenidos diferentes.
Aplicar borde punteado azul de 3px a la primera sección.
Aplicar borde sólido verde con grosores distintos según el lado a la segunda sección.
Aplicar borde doble rojo al botón de la última sección con border-radius opcional.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Ejercicio21.css">
</head>
<body>
    <div class="id1">
        <h2>Estilo de Bordes</h2>
    </div>
    <div class="id2">
        <p>Bordes con Colores y Grosores</p>
    </div>
    <div class="id3">
        <button>Bordes Redondeados</button>
    </div>
</body>
</html>

Código CSS

.id1{
    border-style: dotted;
    border-width: 3px;
    border-color: rgb(13, 90, 204);
    margin: 20px;
    padding: 10px;
}

.id2{
    border-style: solid;
    border-left-width: 20px;
    border-right-width: 10px;
    border-top-width: 5px;
    border-bottom-width: 15px;
    border-color: rgb(21, 214, 21);
}

div button{
    border-style: double;
    border-color: rgb(255, 0, 0);
    border-width: 4px;
    border-radius: 15px;
}

🚀 Ver resultado del ejercicio