Border Properties in CSS

CSS box model explained

The Border Properties in CSS are used to show edges of an element. The borders are used for a decorative purpose. They are very helpful when you want to see that where the edges of an element are. In the previous posts we have discussed about the margins in CSS and padding in CSS. The borders can be defined similarly as the margins and padding. You have to careful as the CSS border property is a part of the element box model. They do affect the width of an element.

CSS box model explained

Border CSS Syntax Shorthand

The borders can be set in the shorthand notation as like margins and padding. See the following code for setting the border for an element.

border: 1px solid red;

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

The border is set with three values for an element. All the three values for the border can be set individually like other elements.

Border width CSS Border Property

The width of the border can be set in the similar way as we used to set the margins and padding. See the code bellow that how we can set border-width for an element.

border-top-width: 2px;
border-right-width: 1px;

border-bottom-width: 2px;

border-left-width: 1px;

border-width: 1px 4px 1px 100px;

Now you will be familiar with the above notation if not see the setting padding property. So you can set the elements border-width individually for all the sides or with a single statement.

Style Border Property

The border style can be set similarly to border-width. The border style can be set individually or with the shorthand notation with just a single line. Here is the example for you to understand

border-style: solid.// It will set style for the entire border of an element border.
border-top-style: dotted// It will set style for the top border of an element border.

border-right-style: dashed// It will set style for the right border of an element border.

border-bottom-style: solid// It will set style for the bottom border of an element border.

border-left-style: dotted// It will set style for the left border of an element border.

Possible value for border style can be:

border-style: solid dotted dashed groove// It is border style for top/right/bottom/left;

Other options for border-style are as follows:

border-style: groove ; //It is a patterned border which sets a carved groove (it is an opposite of ridge). May be shown differently in different browsers.

border-style: ridge ; //It is a patterned border which sets a embossed ridge (it is an opposite of groove). May be shown differently in different browsers.

border-style: inset ; //It is a patterned border which sets a inset depression (it is an opposite of outset). May be shown differently in different browsers.

border-style: outset ; //It is a patterned border which sets a outset extrusion (it is an opposite of inset). May be shown differently in different browsers.

border-style: hidden;

Border Color CSS Border Property

The border color can be set with the border-color property in CSS.

border-color: red.// It will set color for the entire border of an element border.

border-top-color: #333// It will set color for the top border of an element border.

border-right-color: #EEE// It will set color for the right border of an element border.

border-bottom-color: #EFEFEF// It will set color for the bottom border of an element border.

border-left-color: #000// It will set color for the left border of an element border.

border-color: red blue green gray// It is border color for top/right/bottom/left;

Things to Keep In Mind

The border sometimes creates very tricky problems in a layout. As you are familiar with the box model, the border is included in the total with of an element. The width of an element will increase by the border widths and will increase the width by the border-left-width plus border-right-width.

Comments