In CSS, styling borders for elements involves several properties and techniques. Here’s how you can achieve different border effects:
1. Border Width (`border-width`):
- Defines the thickness of the border.
- Values can be specified in pixels (`px`), ems (`em`), or other CSS units.
Example:
border-width: 2px; /* Sets border width to 2 pixels */
2. Border Color (`border-color`):
- Specifies the color of the border.
- Accepts color values such as named colors (`red`, `blue`), hexadecimal (`#RRGGBB`), RGB (`rgb(255, 0, 0)`), etc.
border-color: #333; /* Sets border color to dark gray */
3. Border Style (`border-style`):
- Defines the style of the border (solid, dashed, dotted, etc.).
- Values include `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`, `none`, `hidden`.
border-style: solid; /* Sets the border style to solid */
4. Border Shorthand (`border`):
- Combines `border-width`, `border-style`, and `border-color` into one property.
- Order: `width`, `style`, `color`.
border: 2px solid #333; /* Sets border width to 2 pixels, style to solid, and color to dark gray */
5. Border Radius (`border-radius`):
- Rounds the corners of the border.
- Can be specified individually for each corner or as a single value for all corners.
border-radius: 10px; /* Rounds all corners with a radius of 10 pixels */
Combining these properties allows for precise control over the appearance of borders around HTML elements in CSS.