Lección 10: Border

Crea bordes al rededor de un elemento.

.elemento {
    /*
    border: [tamaño] [estilo] [color];
    */
    border: 1px solid black;
}

Borde arriba

.elemento {
    /*
    border-top: [tamaño] [estilo] [color];
    */
    border-top: 1px solid black;
}

Borde derecha

.elemento {
    /*
    border-right: [tamaño] [estilo] [color];
    */
    border-right: 1px solid black;
}

Borde abajo

.elemento {
    /*
    border-bottom: [tamaño] [estilo] [color];
    */
    border-bottom: 1px solid black;
}

Borde izquierda

.elemento {
    /*
    border-left: [tamaño] [estilo] [color];
    */
    border-left: 1px solid black;
}

width

Tamaño del borde.

.elemento {
    border-width: 2rem;
}

style

Estilo del borde.

.elemento {
    /* Más utilizados */
    border-style: solid;
    border-style: none;
    
    /* Otros */
    border-style: hidden;
    border-style: dotted;
    border-style: dashed;
    border-style: double;
    border-style: groove;
    border-style: ridge;
    border-style: inset;
    border-style: outset;
}

color

Color del borde.

.elemento {
    border-color: orange;
}

radius

Redondea las esquinas.

.elemento {
    border-radius: 4rem;
}

Si el elemento es cuadrado y contiene un border-radius: 50% en adelante, conseguirás un círculo.

image

Usa una imagen personalizada.

.elemento {
    border: 4rem solid;
    border-image: linear-gradient(#f6b73c, #4d9f0c) 1;
}

Más información

10-1 10-2 10-3 10-4

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario