Skip to main content

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

Borders example

The CSS border properties are given below:

  • border-style
  • border-color
  • border-width
  • border-radius
  • border shorthand

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

  • 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).

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;}

Output:

Border example

note

None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

Some other examples:

If the border-style property has four values:

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

If the border-style property has three values:

  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double

If the border-style property has two values:

  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid

If the border-style property has one value:

  • border-style: dotted;
    • all four borders are dotted

CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.

note

The border-width property is not used alone. It is always used with other border properties like "border-style" property to set the border first otherwise it will not work.

<!DOCTYPE html>  
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>

CSS border-color

There are three methods to set the color of the border.

  • Name: It specifies the color name. For example: "red".
  • RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
  • Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is inherited from the color property of the element.

note

The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html>  
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">Red border</p>
<p class="two">Green border</p>
</body>
</html>

Border-color example

You can specify side colors. The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

p.one {  
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}

You can define colors in HEX, RGB or HSL.

p.one {  
border-style: solid;
border-color: #ff0000; /* red */
}
p.one {  
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
p.one {  
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

CSS border-radius

he border-radius property is used to add rounded borders to an element.

It is shorthand for border top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to the corners of the border of an element. We can specify the border for all four corners of the box in a single declaration using the border-radius. The values of this property can be defined in percentage or length units.

This CSS property includes the properties that are tabulated as follows:

PropertyDescription
border-top-left-radiusIt is used to set the border-radius for the top-left corner
border-top-right-radiusIt is used to set the border-radius for the top-right corner
border-bottom-right-radiusIt is used to set the border-radius for the bottom-right corner
border-bottom-left-radiusIt is used to set the border-radius for the bottom-left corner

Example:

Border radius example

CSS Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

Example

p {  
border: 5px solid red;
}

Output:

Example shorthand

You can also specify all the individual border properties for just one side:

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

Output:

Example shorthand