CSS Borders

In CSS, borders are used to add a decorative element around HTML elements. You can set the border width, style, and color using various CSS properties.

To set the border width of an element, you can use the border-width property. The border width can be set to a specific size or you can use one of the following values: thin, medium, or thick. For example:

div {
  border-width: 2px;
}

In the above example, the div element will have a border with a width of 2 pixels.

To set the border style, you can use the border-style property. The following values are available: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. For example:

div {
  border-style: dashed;
}

In the above example, the div element will have a border with a dashed style.

To set the border color, you can use the border-color property. The value can be a color name, a hex code, or an RGB value. For example:

div {
  border-color: #FF0000;
}

In the above example, the div element will have a border with a red color.

You can also set all three properties at once using the border shorthand property. For example:

div {
  border: 2px dashed #FF0000;
}

In the above example, the div element will have a border with a width of 2 pixels, a dashed style, and a red color.

In addition to these properties, you can also set the border-radius property to create rounded corners. This property sets the radius of the corners of the border. For example:

div {
  border-radius: 10px;
}

In the above example, the div element will have rounded corners with a radius of 10 pixels.

Borders can be used to add a decorative element around HTML elements, and can be combined with other CSS properties to create visually appealing designs for your web pages.