CSS Border Sides: A Complete and Easy Guide
CSS border sides allow you to control each side of an element’s border separately. Instead of applying the same border to all four sides, you can style the top, right, bottom, and left borders individually. This gives you more flexibility in web design.
Borders are widely used in buttons, cards, tables, forms, navigation menus, and layout sections. Understanding CSS border sides helps you create clean, modern, and responsive designs.
What Are CSS Border Sides?
In CSS, every element can have four borders:
- Top
- Right
- Bottom
- Left
You can control:
- Border width
- Border style
- Border color
For each side separately.
Basic Border Syntax in CSS
Normally, we write a border like this:
border: 2px solid black;
This applies the same border to all four sides.
But if you want to style each side differently, you use border side properties.
CSS Border Side Properties
1. Border Top
border-top: 3px solid red;
This applies a border only to the top side.
Sub-properties:
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
2. Border Right
border-right: 4px dashed blue;
Sub-properties:
border-right-width: 4px;
border-right-style: dashed;
border-right-color: blue;
3. Border Bottom
border-bottom: 5px double green;
Sub-properties:
border-bottom-width: 5px;
border-bottom-style: double;
border-bottom-color: green;
4. Border Left
border-left: 6px dotted orange;
Sub-properties:
border-left-width: 6px;
border-left-style: dotted;
border-left-color: orange;
Visual Understanding of Border Sides
In the CSS box model:
- The border surrounds the padding.
- The border sits between padding and margin.
- Each side can be customized independently.
Border Styles You Can Use
CSS provides multiple border styles:
- solid
- dashed
- dotted
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Example:
border-top: 2px dashed red;
border-right: 3px dotted blue;
border-bottom: 4px double green;
border-left: 5px solid black;
Practical Examples of CSS Border Sides
1. Underline Effect Using Border Bottom
Instead of using text-decoration, many designers use:
border-bottom: 2px solid black;
This gives better control over thickness and spacing.
2. Highlight One Side Only
border-left: 5px solid #4CAF50;
padding-left: 10px;
Commonly used in:
- Quotes
- Notifications
- Sidebar highlights
3. Card Design with Bottom Emphasis
.card {
border: 1px solid #ccc;
border-bottom: 4px solid #007BFF;
}
This creates a stylish card look.
Using Border Width Individually
You can define different widths like this:
border-width: 1px 2px 3px 4px;
Order:
- Top
- Right
- Bottom
- Left
Example:
border-style: solid;
border-width: 2px 4px 6px 8px;
border-color: red blue green orange;
Border Shorthand for Specific Sides
CSS allows shorthand:
border-top: 2px solid red;
But if you want complete control, use sub-properties.
Border Side with Border Radius
You can combine border sides with border-radius.
border-top-left-radius: 10px;
border-top-right-radius: 10px;
This rounds only specific corners.
Border Side with Different Colors
Example:
border-top: 5px solid red;
border-right: 5px solid blue;
border-bottom: 5px solid green;
border-left: 5px solid yellow;
This creates a colorful frame.
Removing a Specific Border Side
If you want to remove only one side:
border-top: none;
Or:
border-top: 0;
Border Side in Tables
In tables, you often control specific borders:
td {
border-bottom: 1px solid #ddd;
}
This creates row separators.
Border Side in Navigation Menus
Example:
.nav-item {
border-right: 1px solid #ccc;
}
Used to separate menu items.
Advanced Use: Border with Transparent Sides
CSS triangles use border sides cleverly:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
This creates a triangle shape.
Border Side vs Outline
Border:
- Takes space
- Part of box model
Outline:
- Does not take space
- Drawn outside border
Example:
outline: 2px solid red;
Common Mistakes
- Forgetting border-style
If you set width and color but no style, it won’t appear. - Wrong order in shorthand
Correct order: width style color - Confusing margin with border
Browser Support
CSS border side properties are supported in:
- Chrome
- Firefox
- Edge
- Safari
- Opera
They are part of standard CSS and widely supported.
Best Practices
✔ Use individual sides for modern UI
✔ Keep consistency in thickness
✔ Use subtle colors for professional look
✔ Avoid too many mixed styles
Real-World Use Cases
- Highlighted content boxes
- Notification alerts
- Section dividers
- Form inputs
- Buttons
- Cards
- Tabs
Summary
CSS border sides give you powerful control over web design. You can:
- Style each side separately
- Control width, color, and style
- Create creative UI effects
- Build modern layouts
By mastering border-top, border-right, border-bottom, and border-left, you gain precise control over how elements look on a webpage.
Understanding CSS border sides is a fundamental skill for every web designer and developer.
Frequently Asked Questions (FAQs)
1. What are CSS border sides?
CSS border sides are properties that allow you to style the top, right, bottom, and left borders of an element separately.
2. How do you apply a border to only one side in CSS?
You can use properties like border-top, border-right, border-bottom, or border-left to apply a border to a specific side.
3. What is the correct order of border shorthand?
The correct order is: border-width, border-style, border-color.
Example:
border-top: 2px solid red;
4. Can each border side have a different color?
Yes, each side can have a different width, style, and color using individual border properties.
5. What happens if border-style is not defined?
If you do not define a border style, the border will not appear even if width and color are set.