CSS border

The border is the usual line that is displayed around the element. But it is not necessary to apply the border surrounding the element from all sides. You can add it only from the required side of the element. For example, if you add a border only from the bottom of the block element, it will produce the same effect as the HTML <hr> tag, acting as a separator.

Each border has three parameters that we can control using CSS: width, style and color. Let's consider with what properties it is possible to set and change them:

border-width specifies the width of the border. To set the width, you can use pixels or keywords: thin, medium, thick.
border-style defines the border style using one of eight possible values: solid, dotted, dashed, double, groove, ridge, inset, and outset.
border-color specifies the color of the border.

Instead of using all three properties, you can use only one CSS border property, which allows you to set the width, style, and color for the border in one declaration at a time:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
		border-color: red;
      }
      p.three {
        border: 3px dashed #ffffff;
        background-color: #0000FF;
		color: #ffffff;
      }
    </style>
  </head>

  <body>
    <p class="one">First paragraph.</p>
    <p class="two">Second paragraph.</p>
    <p class="three">Third paragraph.</p>
  </body>
</html>

Try it »

To control the border separately on each side of the element, the corresponding properties are used:

border-top
border-left
border-right
border-bottom

These properties work in the same way as the border property, with the exception that you can control a border on only one side of an element.

With this theme look: