CSS Borders

CSS borders are used to define the boundaries of an element. You can control the border's width, style, color, and radius to achieve various visual effects. Borders enhance the layout and design of your web pages.

Border Width

The `border-width` property sets the width of the border around an element. You can use specific values such as pixels or keywords.

/* Border width examples */
.box {
    border-width: 2px; /* 2 pixels */
}

.card {
    border-width: thick; /* Thick border */
}

        

Border Style

The `border-style` property defines the style of the border. Common styles include `solid`, `dotted`, `dashed`, `double`, and `none`.

/* Border style examples */
.solid-border {
    border-style: solid; /* Solid border */
}

.dotted-border {
    border-style: dotted; /* Dotted border */
}

.dashed-border {
    border-style: dashed; /* Dashed border */
}

.double-border {
    border-style: double; /* Double border */
}

.no-border {
    border-style: none; /* No border */
}

        

Border Color

The `border-color` property sets the color of the border. You can use named colors, hex codes, RGB, RGBA, HSL, or HSLA values.

/* Border color examples */
.blue-border {
    border-color: #3490dc; /* Hex code */
}

.red-border {
    border-color: rgba(255, 99, 71, 0.5); /* RGBA */
}

.green-border {
    border-color: hsl(120, 100%, 50%); /* HSL */
}

        

Border Radius

The `border-radius` property defines the radius of the element's corners. You can set the radius for all corners or specify individual corners.

/* Border radius examples */
.rounded-box {
    border-radius: 10px; /* All corners */
}

.rounded-tl-box {
    border-top-left-radius: 15px; /* Top-left corner only */
}

.rounded-br-box {
    border-bottom-right-radius: 50%; /* Bottom-right corner only */
}

        

Border Shorthand

The `border` shorthand property allows you to set the border width, style, and color in one line.

/* Border shorthand example */
.box {
    border: 2px solid #3490dc; /* Width, style, and color */
}