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:

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>
    <meta charset="utf-8">
    <title>Page title</title>
      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;

    <p class="one">First paragraph.</p>
    <p class="two">Second paragraph.</p>
    <p class="three">Third paragraph.</p>
Try it »

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

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.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen