CSS Borders

css

In CSS, you can use the border property to add a border around an element. The border property is a shorthand property for the following individual border properties:

  • border-width: specifies the width of the border.
  • border-style: specifies the style of the border.
  • border-color: specifies the color of the border.

You can set the border property on any element, and you can control the look of the border by setting the width, style, and color as necessary.

Here’s an example of how you might use the border property:

.my-element {
    border: 1px solid black;
}

This would add a 1 pixel wide, solid black border around the element with the class my-element.

You can also use the individual border properties to specify different values for the border on each side of the element. For example:

.my-element {
    border-top: 2px solid red;
    border-right: 1px dashed blue;
    border-bottom: 3px double green;
    border-left: 4px dotted purple;
}

This would add a top border that is 2 pixels wide, solid red; a right border that is 1 pixel wide, dashed blue; a bottom border that is 3 pixels wide, double green; and a left border that is 4 pixels wide, dotted purple.

You can also use the border-radius property to add rounded corners to the border.

.my-element {
    border: 1px solid black;
    border-radius: 10px;
}

This would add a 1 pixel wide, solid black border with 10 pixel rounded corners to the element with the class my-element.