CSS Borders

By Tony 6.10.2024

Now that you know about colors and backgrounds in CSS, you can style your website even more by adding borders to your elements. Borders can highlight elements, seperate content, and improve your page's readability. Let's learn how to add it:

To add a border to an element, use the CSS property of "border". There are three different values in the rule: 5px, solid, and orange. The first one, 5px, sets the width of the border. The second one, solid, defines the border stlye. It can also be dotted, dashed, and a lot more. The third one, orange, you guessed it, sets the color of the border to orange. You can change the order of the values if you want, but this is the recommended way of adding borders in CSS.

Bonus: rounded corners

In modern web design and many modern websites, rounded elements are very important and common, and can make your page more visually appealing and smooth overall. To add it, you need to use another CSS border property:

The "border-radius" sets how much an element's corners are rounded. In this case, the radius of the rounded corner is 15px. To make it more rounded, simply increase the number. Note that you can round the corners of an element without giving it a border. To make each corner have a different radius, do this:

In this case, we put four values in the rule. The first value (10px) is for the top-left corner, second value (30px) for the top-right, third value (5px) for the bottom-right, and the fouth (20px) for the bottom-left. Feel free to paste this code or the above code to the example above, and see how the element's corners are rounded! You can also change the values and see what you can create with CSS borders and rounding!