The CSS Borders - JS Curious

We can create a border around any element using the border property of CSS. The basic syntax is:

border: border-width border-style border-color;

For example:

p {
    border: 1px solid grey;
}

border: 1px solid grey;

The border-width can be specified in px, rem, em, cm, % etc.

The border-style can have values like:

none
solid
dashed
dotted
double
groove
ridge
inset
outset
hidden

The border-color can have values in name, RGB, HEX or HSL etc.

We can also set all the 3 border properties individually.

The border-width property

p {
    border-width: 5px;
}

The border-width property can set values for all 4 side of the element.

If the border-width has 4 values, then first value is for top border, second value is for right border, third value is for bottom border and fourth value is for left border.

p {
    border-width: 5px 10px 20px 15px;
}

If border-width has 3 values, then first value is for top border, second value is for both left and right border and third value is for bottom border.

p {
    border-width: 5px 20px 10px;
}

If the border-width has 2 values, then first value is for both top and bottom border and second value is for both left and right border.

p {
    border-width: 5px 20px;
}

If the border-with has one value then all side border has same value.

The border-style property

p {
    border-style: dashed;
    border-width: 5px;
}

The border-style property also can set values for all four side of element.

border-style: dashed;

The border-style with four values

p {
    border-width: 5px;
    border-style: dashed solid dotted groove;
}

border-style: dashed solid dotted groove;

The border-style with three values

p {
    border-width: 5px;
    border-style: dashed solid dotted ;
}

border-style: dashed solid dotted

The border-style with two values

p {
    border-width: 5px;
    border-style: dashed solid ;
}

border-style: dashed solid

The border-color property

p {
    border-width: 5px;
    border-style: solid;
    border-color: red;
}

border-color: red;

Like the other two property, border-color can also set values for all four side of element.

The border-color with four values

p {
    border-width: 5px;
    border-style: solid;
    border-color:#ff0e0e #007eff #02e702 #a900ff;
}

border-color: #ff0e0e #007eff #02e702 #a900ff;

The border-color with three values

p {
    border-width: 5px;
    border-style: solid;
    border-color: rgb(255, 0, 0) rgb(0, 126, 255) rgb(2, 231, 2);
}

border-color: rgb(255, 0, 0) rgb(0, 126, 255) rgb(2, 231, 2);

The border-color with two values

p {
    border-width: 5px;
    border-style: solid;
    border-color: red blue;
}

border-color: red blue;

Hope you have got a clear picture of the border property. Now play around the border properties and give your HTML box elements a proper look.

Amitav Mishra