Home » Learn » CSS Tutorial » CSS Borders

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

PropertiesExample & Syntax
Border Colorborder-color: blue;
Border Styleborder-style: solid;
Border Widthborder-width: 2px;
Border Shorthand Propertyborder: 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-colour . Shorthand property works in this order: top, right, bottom, and then left.

Here are different examples to set border color:

border-top-color: green;
border-right-color: blue;
border-bottom-color: black;
border-left-color: red;
border-color: green blue black red;

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 the 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:

border-top-style: solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;
border-style: solid dotted double dashed;

The border-width Property

The border-width attribute allows you to set the width of CSS borders. You can set the width of 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-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 2px;
border-left-width: 1px;
border-width: 2px 4px 2px 1px;

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

<html>
   <head>
   </head>
   <body>
      <p style="border-top-style: dashed; border-left-style:solid; border-right-style: solid; border-bottom-style: dotted;">
      This is the example of CSS Border Style property.
      </p>
      <p style="border-style:solid solid dashed dotted;">
      This is the example of CSS Border Style Shorthand property. The border style defines with order: top, right, bottom and then left side of HTML element.
      </p>
      <p style="border-width:2px; border-style: dotted; border-color: megento;">
      This is the example of CSS Border Width, Style and Color properties.
      </p>
      <p style="border-style:solid;">
      This is the example of CSS Border Style Shorthand property. Please note that border style is the only mandatory thing to set border. Border width & color is optional and those values can be taken from browsers default.
      </p>
      <p style="border:2px solid blue;">
      This is the example of CSS Border Shorthand property.
      </p>
      <p style="border:2px solid green; border-right-color: blue; border-bottom-style: dotted;">
      You can override one border property with another or individual border property. Latest defined border property will override existing one.
      </p>
   </body>
</html>

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.