CSS Border

CSS border is used to create a visible boundary around an HTML element.

A border appears between the element's padding and margin. It can be customized using different styles, widths, and colors.

Basic Syntax

selector {
    border: width style color;
}

Border Diagram

Simple Explanation

Example 1: Solid Border

The solid border creates a continuous line around the element.

.box {
    background-color: lightblue;
    border: 4px solid blue;
    padding: 20px;
}

Output

Example 2: Dashed Border

The dashed style creates a border made of short lines.

.box {
    background-color: lightgreen;
    border: 3px dashed green;
    padding: 20px;
}

Output

Example 3: Dotted Border

The dotted style creates a border made of dots.

.box {
    background-color: lightyellow;
    border: 3px dotted orange;
    padding: 20px;
}

Output

Border Properties

Example 4: Border on Individual Sides

You can apply different borders to the top, right, bottom, and left sides of an element.

.box {
    background-color: #e9d5ff;

    border-top: 5px solid purple;
    border-right: 5px solid blue;
    border-bottom: 5px solid green;
    border-left: 5px solid red;

    padding: 20px;
}

Output

Border Shorthand

Instead of writing border width, style, and color separately, you can combine them into one property.

.box {
    background-color: #d1fae5;
    border: 2px solid #047857;
    padding: 20px;
}

Output

Common Border Styles

Border Width

The border width controls the thickness of the border. You can use values such as pixels or predefined keywords.

.box {
    border-width: 5px;
    border-style: solid;
    border-color: blue;
}

Border Color

The border color can be specified using color names, HEX values, RGB values, and other CSS color formats.

.box {
    border: 3px solid #2563eb;
}