CSS BORDERS

BORDERS

Especifica el estilo, ancho y el color del borde de un elemento.

border-style:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Ancho

border-width especifica el ancho de los 4 bordes.

p {
    border-style: solid;
    border-width: medium;
}

px, pt, cm, em

Valores Predefinidos

thin
medium
thick

Ancho

border-width: 20px 100px 6px 3px;

Una sola linea para modificar borde.

(superior, derecho, inferior, izquierdo)

Color De Borde

/* Aplicar a todos los bordes*/
border-color: green;

/*Por borde*/
border-color: blue yellow black white;

Pueden ser por nombre, RGB, Hex o transparente

Borde por lado

/* Aplicar a superior*/
border-top-style: solid;

/*Aplicar a inferior*/
border-bottom-style: dotted;

/*Aplicar por lado */
border-style: dotted double solid dashed;

Acortar Propiedad

/* width - style - color */
border: 5px solid red;

/*Acortar para un lado*/
border-top: 5px solid red;

Border Radius

border-radius: 10px;

Agregar bordes redondos a un elemento