CSS Border

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 3 properties together in one row.

<!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"> Example with yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with green solid border.</p>
  </body>
</html>

Other examples you can see with our CSS Maker, which you will find on the homepage of our website.