CSS Borders 🎯

Welcome to our comprehensive guide on CSS Borders! In this lesson, we'll dive deep into understanding borders, their properties, and how to use them to enhance the visual appeal of your web projects.

What are Borders in CSS? 📝

A border in CSS is a visual indicator around an HTML element, helping to separate it from other elements on the page. Borders consist of four parts:

Border-top
Border-right
Border-bottom
Border-left

Each part can have specific properties like width, style, and color.

Basic Border Properties 💡

Border-width: Defines the thickness of the border. Can be set as a single value, two values (for top and bottom or left and right), or four values (individual sides).
Border-style: Sets the border's appearance (solid, dashed, dotted, etc.).
Border-color: Defines the color of the border.

Syntax for Setting Borders ✅

To set the border properties, we use the border shorthand property. Here's the basic syntax:

css

.selector {
    border: border-width border-style border-color;
}

Example:

css

.my-box {
    border: 2px solid #007bff;
}

In this example, the .my-box class sets the border width to 2 pixels, the border style to solid, and the border color to a shade of blue (#007bff).

Advanced Border Properties 💡

Border-radius: Used to round the corners of the border.
Border-image: Enables us to use an image as a border.

Quiz 💡

Stay tuned for our next lesson where we'll explore how to use border-radius and border-image in CSS! 🎉