What are border property values?

The border property in CSS is a shorthand property that allows you to set the width, style, and color of an element's border in one declaration. Here are the values you can use for the border property:

1. Width: Specifies the thickness of the border. Common values include:

   • thin
   • medium
   • thick
   • Specific lengths (e.g., 1px, 2em, etc.)

2. Style: Defines the style of the border. Possible values include:

   • none: No border.
   • solid: A solid line.
   • dashed: A dashed line.
   • dotted: A dotted line.
   • double: Two solid lines.
   • groove: A 3D grooved border.
   • ridge: A 3D ridged border.
   • inset: A 3D inset border.
   • outset: A 3D outset border.

3. Color: Specifies the color of the border. You can use:

   • Color names (e.g., red, blue)
   • Hex codes (e.g., #ff0000, #00ff00)
   • RGB values (e.g., rgb(255, 0, 0))
   • RGBA values (e.g., rgba(255, 0, 0, 0.5))
   • HSL values (e.g., hsl(120, 100%, 50%))

Example Usage:

.box {
  border: 2px solid #3498db; /* 2px width, solid style, blue color */
}

In this example, the .box class will have a border that is 2 pixels wide, solid, and colored blue.