CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border. Every HTML element can have a border that surrounds the padding and content.

---

Border Style

The border-style property is the most important; it specifies what kind of border to display. Without this, no border will appear.

/* Example Syntax */
p {
    border-style: solid;
    border-style: dotted;
    border-style: dashed;
    border-style: double;
    border-style: none; /* No border */
}

---

Border Width

The border-width property sets the thickness of the border. It can be set using specific units (px, pt, em) or by using one of the three pre-defined values: thin, medium, or thick.

p {
    border-style: solid;
    border-width: 5px;
}

---

Border Color

The border-color property is used to set the color of the four borders. The color can be set by name, HEX, RGB, or HSL values.

p {
    border-style: solid;
    border-color: #2e7d52;
}

---

The Border Shorthand

To keep your CSS code clean, you can specify all the individual border properties in one single property. The order of the values should be: width style color.

/* Shorthand property */
p {
    border: 3px solid #007bff;
}

---

Individual Sides

You can also specify different borders for each side (top, right, bottom, left) of an element:

p {
    border-top: 2px solid red;
    border-bottom: 5px dotted blue;
    border-left: 10px solid green;
}

---

Rounded Borders

The border-radius property is used to add rounded corners to an element, making it look more modern and friendly.

div {
    border: 2px solid #2e7d52;
    border-radius: 12px;
}

---