CSS Borders

Introduction

CSS allows you to control the appearance of borders around HTML elements.

Border Properties

Key border properties include border-width, border-style, and border-color. You can set these properties individually or use the shorthand border property.

Border Width

border-width controls the thickness of the border. Values can be in pixels, ems, rems, or other units.

Example: border-width: 2px;

Border Style

border-style determines the style of the border (e.g., solid, dashed, dotted).

Example: border-style: dashed;

Border Color

border-color sets the color of the border. You can specify color using color names, hexadecimal values, RGB values, or HSL values.

Example: border-color: #333;

Shorthand Property

border can be used to set all border properties at once.

Example: border: 2px dashed #333;

Border Radius

border-radius controls the curvature of the corners of an element, allowing you to create rounded corners.

Example: border-radius: 10px;

Border Examples

div {
    border: 2px solid #333;
}

button {
    border: 1px dashed red;
    border-radius: 5px;
}