In CSS, the border property is used to set the border of an element.
It can be used to control the width, style, and color of the border.
Specifies the width of the border. It can be set individually for each side (top, right, bottom, left) or with the shorthand property border-width.
We can use values like thin, medium, thick, or specify the width in pixels (px), points (pt), ems (em), or other units.
Specifies the style of the border.
Common values include solid, dotted, dashed, double, groove, ridge, inset, and outset.
Specifies the color of the border.
We can use color names, hexadecimal values, RGB, RGBA, HSL, HSLA, or other supported color formats.
The border property is a shorthand for setting the width, style, and color of the border in one declaration.
It follows the order: width, style, color.
/* Individual border properties */
div {
border-width: 2px; /* top, right, bottom, left */
border-style: solid; /* solid, dotted, dashed, double, etc. */
border-color: red; /* color name, hex, rgb, etc. */
border-top-left-radius: 20px; /* border corners top left side rounded by 20px */
border-top-right-radius: 10px; /* border corners top left side rounded by 10px */
border-bottom-left-radius: 5px; /* border corners top left side rounded by 5px */
border-bottom-right-radius: 30px; /* border corners top left side rounded by 30px */
}
/* Shorthand border property */
div {
border: 2px solid red; /* width, style, color */
border-radius: 20px; /* border corners all sides rounded by 20px */
}
We can also specify different border properties for each side individually using the properties "border-top", "border-right", "border-bottom", and "border-left".
div {
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
}
Borders are commonly used in CSS to visually separate elements or to create decorative effects.
They are often combined with other layout properties like padding and margin to achieve desired visual effects.