CSS borders


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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.