X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS Border

In this chapter we will speak about border and how we can give styles to them. We can give style, color and width to our border.

For the first let's see the styles of borders.

The border-style values are:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Border Width

The border-width property is used to set the width of the border.

The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Remember: The "border-width" property does not work if it's used alone. Use the "border-style" property to set the borders first.

Border Color

The border-color property is used to set the color of the border. The color can be set by:

  • name - specify a color name, like "red"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • Hex - specify a hex value, like "#ff0000"

Remember: The "border-color" property doesn't work if it is used alone. Use the "border-style" property to set the borders first.

Usually we are writing these three properties together in one row.

Let's see the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Exaxmple with yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with green solid border.</p>
  </body>
</html>

Result

You can see other examples with our CSS Maker tool.


Practice Your Knowledge

The followings are values for border-styles property, except



Do you find this helpful?

Related articles