16. Border

Creates borders around an element.

.elemento {
    /*
    border: [size] [style] [color];
    */
    border: 1px solid black;
}

Top border

.elemento {
    /*
    border-top: [size] [style] [color];
    */
    border-top: 1px solid black;
}

Right border

.elemento {
    /*
    border-right: [size] [style] [color];
    */
    border-right: 1px solid black;
}

Bottom border

.elemento {
    /*
    border-bottom: [size] [style] [color];
    */
    border-bottom: 1px solid black;
}

Left border

.elemento {
    /*
    border-left: [size] [style] [color];
    */
    border-left: 1px solid black;
}

width

Border size.

.elemento {
    border-width: 2rem;
}

style

Border style.

.elemento {
    /* Most used */
    border-style: solid;
    border-style: none;

    /* Others */
    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

Border color.

.elemento {
    border-color: orange;
}

radius

Rounds the corners.

.elemento {
    border-radius: 4rem;
}

If the element is square and has a border-radius: 50% or greater, you will get a circle.

image

Uses a custom image.

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

More information