CSS Borders

The CSS Border allows you to specify the border around HTML elements.


CSS Border Properties

The following table will list mostly used CSS border properties:

CSS Border Properties
Properties Example & Syntax
Border Color border-color: blue;
Border Style border-style: solid;
Border Width border-width: 2px;
Border Shorthand Property border: 2px solid blue

The border-color Property

The border-color attribute allows you to define the color of the box’s border. You can individually change the color of the bottom, left, top and right border of HTML element.

There is shorthand property available to set the color of all four sides in the single attribute border-color. Shorthand property works in this order: top, right, bottom, and then left.

Here are different examples to set border color:

You can specify CSS borders colors in various formats such as RGB or hexadecimal.


The border-style Property

The border-style attribute allows you to define style of a box’s border such as solid or dotted. You can individually set the style of the bottom, left, top and right border of HTML element. There is shorthand property available to set the style of all four sides.

Border style property can have different values for different styles. Mostly used border styles are: dotted, solid, double, and dashed. Here are some examples to set border style:


The border-width Property

The border-width attribute allows you to set the width of CSS borders. You can set the width of the each border (bottom, left, top and right) individually. There is shorthand property available to set the width of all four sides of an HTML element.

Here are some examples to set CSS border width:


Border – Shorthand Property

CSS shorthand property allows you to set border style, width, and color in a single property. Therefore, you do not need to deal with a lot of border properties most of the time.

Here is an example to set CSS border style, width and color using shorthand property: border: 2px solid red;


Example of HTML Program having CSS border properties


Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.