CSS Border

CSS border Property

The border property in CSS allows you to add, style, and customize borders around elements. Borders can be solid, dashed, dotted, or rounded corners.

1. Basic Syntax

selector {
  border: width style color;
}

• width → Specifies the thickness of the border (e.g., 1px, 2em, thin).
• style → Defines the appearance (e.g., solid, dashed, dotted).
• color → Sets the border color (e.g., red, #ff5733, rgb(0, 0, 255)).

2. Border Styles

Style	Example	Description
solid	border: 2px solid black;	A continuous solid line.
dotted	border: 2px dotted blue;	A series of dots.
dashed	border: 2px dashed red;	A series of dashes.
double	border: 4px double green;	Two solid lines.
groove	border: 4px groove purple;	A 3D grooved effect.
ridge	border: 4px ridge brown;	A 3D ridged effect.
inset	border: 4px inset gray;	Appears inside the element.
outset	border: 4px outset orange;	Appears outside the element.
none	border: none;	No border.

3. Shorthand vs Individual Borders

A. Shorthand Method

div {
  border: 3px solid black;
}

✅ Defines all sides in one line.

B. Individual Borders

div {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 4px double green;
  border-left: 5px dotted purple;
}

✅ Allows different styles per side.

4. Border Radius (Rounded Corners)

div {
  border: 3px solid black;
  border-radius: 10px;
}

✅ Creates rounded corners.

div {
  border-radius: 50%;
}

✅ Makes a circle (if width = height).

5. Border with Background

div {
  width: 200px;
  height: 100px;
  border: 5px solid black;
  background-color: lightgray;
}

✅ Border + background for better visibility.

6. Transparent Borders

div {
  border: 4px solid transparent;
  border-top-color: red;
}

✅ Makes some sides invisible.

7. Best Practices

✔ Use border-radius for modern UI/UX designs.
✔ Avoid thick borders unless for emphasis.
✔ Combine border + box-shadow for stylish effects.

8. Browser Support

✅ Fully supported in all modern browsers.