CSS borders


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

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.