Login With Github

CSS Borders

We can use CSS border properties to set the border color, border style, and border width of HTML elements. There are three common CSS border properties:

  • border-color: set the color of the border
  • border-style: set the style of the border, such as solid, dashed, double, etc.
  • border-width: set the width of the border

border-style property

We can use the border-style property to define the style of the border, so it's the most important one of the three border properties.

The border-style property defines 10 different non-inheritance styles, including none.

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Here is a complete example:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

border-width property

We can use the border-width property to define the width of the border.

There are two ways to specify the width:

  1. Specify the length value, such as 2px or 0.1em (in unit of px, pt, cm, em, etc.)
  2. Use the keywords, such as thick, medium (by default), and thin.

Note: Because the keywords thick, medium and thin do not specify a specific width value, different browsers may display different widths.

You can try the following example with different browsers:

p.one {
    border-style: solid;
    border-width: 5px;

p.two {
    border-style: solid;
    border-width: medium;

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;

You can set each side of the border of the element in the order of top-right-bottom-left:

p {
    border-style: solid;
    border-width: 15px 5px 15px 5px;

So the above example can also be abbreviated as:

p {
    border-style: solid;
    border-width: 15px 5px;

You can also set the width of each side of the border separately with following properties:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

Thus the above example can also be written like this:

p {
    border-style: solid;
    border-top-width: 15px;
    border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;

border-color property

We can use the border-color property to set the color for the four sides of the border.

We can use any type of color value, such as color name, Hex values, and RGB values for the value of border-color property. You can set the color of each side of the border for the element in the order of top-right-bottom-left :

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;

You can also use the following properties to set the color of each side of the border:

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

For example, if we want to specify a solid black border for the <h1> element, but the right side is solid red,then we can define the CSS rule like this:

h1 {
    border-style: solid;
    border-color: black;
    border-right-color: red;

Border Shorthand Property

In the above examples, we get to know three CSS border properties to set the borders of HTML elements. To simplify the CSS code, we can combine these properties into the one  property,  for instance:

p {
    border: 5px solid red;

You can also use the shorthand properties to define the style of each side border. For example, let's define the left side border like this:

p {
    border-left: 6px solid red;
    background-color: lightgrey;

You can define the style of the right side border, top side border, and bottom side border in the same way. 

border-radius property

The border-radius property is defined in CSS3,which achieves the rounded border.For example:

p {
    border: 2px solid red;
    border-radius: 5px;

However, the border-radius property is not supported by all browsers (except for IE6, 7, 8 and earlier, most browsers support the border-radius property now).

0 Comment