CSS Borders

1. Basic Border Syntax

The simplest way to define a border:

.box {
    border: 2px solid black;
}
            

2. Individual Sides

You can set borders on specific sides:

.top {
    border-top: 2px solid red;
}

.right {
    border-right: 2px dashed blue;
}

.bottom {
    border-bottom: 2px dotted green;
}

.left {
    border-left: 2px double orange;
}
            

3. Width, Style & Color

Each component of a border can be set individually:

.custom-border {
    border-width: 3px;
    border-style: dashed;
    border-color: teal;
}
            

4. Border Radius

Use border-radius to create rounded corners:

.rounded {
    border: 2px solid #333;
    border-radius: 10px;
}
            

5. Shorthand Syntax

Combine all border properties into one line:

.box {
    border: 4px dotted purple;
}
            

6. Border vs Outline

Borders are part of the box model and affect layout. Outlines do not affect layout and sit outside the border.

.outlined {
    outline: 2px solid red;
}
            

Conclusion

CSS borders give structure and emphasis to elements. With full control over style, width, color, and radius, you can style elements with precision and creativity.