Borders are used to create a visible outline around an element.
They help separate elements on a page and make layouts easier to understand.
Let’s learn borders by writing real CSS instead of only reading theory.
This example shows the most basic border.
The border property adds a line around the element.
It uses three values: thickness, style, and color.
Borders can have different styles.
Common border styles are:
solid, dashed, dotted, double, and none.
You can use different styles to match the design of your website.
Real world use of borders
Borders are often used in:
- Cards
- Alerts
- Forms
- Tables
- Navigation menus
They help users clearly see different sections of a page.
Developer tip
Always design borders that are clear but not too heavy.
Too thick borders make the UI look outdated and crowded.
Practice task
Create a box with:
- Border: 4px double blue
- Padding: 20px
- Text: "CSS Borders Practice"
Try changing the border style and color.
Next lesson
In the next page, you will learn how margins work and how they control space between elements.