CSS

CSS borders allow you to create visual separation between elements on a webpage. This guide covers all border properties, including types, width, color, radius (rounded corners), and advanced styles like dashed and gradient borders.

---

1️⃣ CSS Border Basics

The border property is used to add a border around an element.

Example:

div {
    border: 2px solid black;
}

📌 Shorthand Syntax:

border: [width] [style] [color];

📌 Breakdown:

• 2px → Border width
• solid → Border style
• black → Border color

---

2️⃣ CSS Border Styles

The border-style property defines how the border looks.

Available Styles:

div {
    border-style: solid;    /* Solid line */
    border-style: dashed;   /* Dashed line */
    border-style: dotted;   /* Dotted line */
    border-style: double;   /* Double solid lines */
    border-style: groove;   /* 3D grooved border */
    border-style: ridge;    /* 3D ridged border */
    border-style: inset;    /* 3D inset border */
    border-style: outset;   /* 3D outset border */
    border-style: none;     /* No border */
}

---

3️⃣ CSS Border Width

The border-width property defines the thickness of the border.

Example:

div {
    border-width: 5px;      /* Same width on all sides */
    border-width: 2px 5px;  /* Top & bottom = 2px, Left & right = 5px */
    border-width: 1px 3px 5px; /* Top=1px, Left & right=3px, Bottom=5px */
    border-width: 1px 2px 3px 4px; /* Top, Right, Bottom, Left */
}

---

4️⃣ CSS Border Color

The border-color property sets the color of the border.

Example:

div {
    border: 3px solid red;  /* Single color */
    border-color: blue green red yellow;  /* Different colors for each side */
}

📌 You can use:

• Named colors (red, blue)
• HEX (#ff5733)
• RGB (rgb(255, 0, 0))
• HSL (hsl(240, 100%, 50%))

---

5️⃣ CSS Border Radius (Rounded Corners)

The border-radius property rounds the corners of a border.

Example:

div {
    border: 2px solid black;
    border-radius: 10px; /* Rounded corners */
}

📌 Advanced Usage:

border-radius: 10px 20px 30px 40px; /* Top-left, Top-right, Bottom-right, Bottom-left */
border-radius: 50%; /* Makes a circle (for square elements) */

---

6️⃣ CSS Border for Specific Sides

You can add borders to specific sides using:

• border-top
• border-right
• border-bottom
• border-left

Example:

div {
    border-top: 3px solid red;
    border-right: 5px dashed blue;
    border-bottom: 4px dotted green;
    border-left: 2px double black;
}

---

7️⃣ CSS Border Gradient

You can create a gradient border using background-clip.

Example:

div {
    border: 5px solid transparent;
    border-image: linear-gradient(to right, red, blue) 1;
}

---

8️⃣ CSS Outline vs Border

🔹 Outline is different from a border because it does not take up space and can go outside the element.

Example:

div {
    border: 2px solid black;
    outline: 3px dashed red;
}

---

9️⃣ CSS Border Animation

You can animate borders using CSS animations.

Example:

div {
    border: 3px solid transparent;
    animation: borderAnimation 3s infinite;
}

@keyframes borderAnimation {
    0% { border-color: red; }
    50% { border-color: blue; }
    100% { border-color: green; }
}

---

🔟 CSS Border Shorthand

Instead of writing multiple properties, you can use shorthand:

Example:

border: 3px dashed blue;

📌 Shorthand order:
border: width style color;

---

🎯 Conclusion

✅ border → Adds a border around elements
✅ border-style → Defines solid, dashed, dotted, etc.
✅ border-width → Sets thickness
✅ border-color → Specifies the color
✅ border-radius → Rounds corners
✅ border-image → Adds gradient effects