DEV Community

Cover image for CSS Borders – Styling Your Elements’ Outlines
Ridoy Hasan
Ridoy Hasan

Posted on

2

CSS Borders – Styling Your Elements’ Outlines

Here’s the next post for your CSS: Basic to Brilliance series:


Lecture 9: CSS Borders – Styling Your Elements’ Outlines

In this lecture, we’ll explore how to add and customize borders around HTML elements using CSS. Borders can significantly impact the visual appearance of your elements and define sections of your webpage.

1. Basic Border Properties

CSS borders are defined using three key properties:

  • border-width: Defines the thickness of the border.
  • border-style: Specifies the style (solid, dashed, dotted, etc.).
  • border-color: Sets the color of the border.
Example:
<div class="box">
    This is a bordered box!
</div>
Enter fullscreen mode Exit fullscreen mode
.box {
    border-width: 2px;
    border-style: solid;
    border-color: #4CAF50; /* Green border */
}
Enter fullscreen mode Exit fullscreen mode

This will create a box with a solid, green border that’s 2 pixels thick.

2. Shorthand Property for Borders

You can also define all border properties using a single shorthand property:

.box {
    border: 2px solid #4CAF50;
}
Enter fullscreen mode Exit fullscreen mode

This shorthand syntax makes the code cleaner and easier to manage.

3. Different Border Styles

CSS offers various styles for borders. Some common styles are:

  • solid
  • dashed
  • dotted
  • double
Example:
.box-dashed {
    border: 3px dashed #f44336; /* Red dashed border */
}
Enter fullscreen mode Exit fullscreen mode

This will create a red, dashed border around the element.

4. Rounded Borders with border-radius

To add rounded corners to a border, use the border-radius property.

Example:
.rounded-box {
    border: 2px solid #2196F3; /* Blue solid border */
    border-radius: 10px; /* Rounded corners */
}
Enter fullscreen mode Exit fullscreen mode

This will create a box with rounded corners (10px radius) and a blue border.

5. Individual Border Sides

CSS allows you to style each side of a border individually using properties like border-top, border-right, border-bottom, and border-left.

Example:
.sided-box {
    border-top: 4px solid #FF5722; /* Orange top border */
    border-right: 2px dotted #3F51B5; /* Blue dotted right border */
}
Enter fullscreen mode Exit fullscreen mode

This will create a box with a thick orange solid top border and a blue dotted right border.

6. Using Images as Borders

With the border-image property, you can use an image as the border of an element.

Example:
.image-border {
    border: 10px solid transparent;
    border-image: url('border-image.png') 30 round;
}
Enter fullscreen mode Exit fullscreen mode

This allows you to get creative by adding custom images to your borders.

Conclusion

CSS borders can dramatically change the look and feel of elements on your webpage. Experiment with different styles, colors, widths, and radii to achieve the design you want.


follow me on LinkedIn

Ridoy Hasan

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay