CSS borders

Author: MDBootstrap

CSS Border Properties

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

                .example-1 {
                  border: 1px solid black;
                  .example-2 {
                  border-bottom: 1px solid blue;
                  .example-3 {
                  border: 1px solid grey;
                  border-radius: 15px;
                  .example-4 {
                  border-left: 5px solid purple;

            <p class="example-1">I have black borders on all sides.</p>
            <p class="example-2">I have a blue bottom border.</p>
            <p class="example-3">I have rounded grey borders.</p>
            <p class="example-4">I have a purple left border.</p>

I have black borders on all sides.

I have a blue bottom border.

I have rounded grey borders.

I have a purple left border.

From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

                      .example-5 {
                        border-top: 3px solid blue;;
                        border-right: 3px solid red;;
                        border-bottom: 3px solid green;;
                        border-left: 3px solid orange;;

                    <p class="example-5">I have a different borders on each side.</p>

Live preview

I have a different borders on each side.

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author