CSS border Property

CSS border Property

The border property in CSS is a shorthand property used to define the width, style, and color of an element’s border in a single declaration.

1. Syntax

selector {
  border: [border-width] [border-style] [border-color];
}

Accepted Values:

Property	Possible Values	Description
border-width	thin, medium, thick, px, em, etc.	Defines the thickness of the border.
border-style	solid, dotted, dashed, double, groove, ridge, none, hidden	Specifies the appearance of the border.
border-color	Named colors, #hex, rgb(), rgba(), hsl(), etc.	Sets the color of the border.

2. Example – Applying a Border to an Element

.box {
  border: 3px solid red;
}

<div class="box">This has a red border</div>

✅ The div will have a 3px solid red border.

3. Example – Different Border Styles

.box1 { border: 4px dotted blue; }
.box2 { border: 5px dashed green; }
.box3 { border: 6px double orange; }
.box4 { border: 3px solid rgba(255, 0, 0, 0.5); } /* Semi-transparent */

<div class="box1">Dotted Border</div>
<div class="box2">Dashed Border</div>
<div class="box3">Double Border</div>
<div class="box4">Transparent Red Border</div>

✅ Each div has a different border style.

4. Example – Border on Specific Sides

Instead of applying a border to all sides, you can set it only on specific sides:

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

✅ This applies different border styles on each side.

5. Example – Using border-width, border-style, and border-color Separately

You can also define these properties individually:

.box {
  border-width: 4px;
  border-style: dashed;
  border-color: purple;
}

✅ This is equivalent to border: 4px dashed purple;

6. Example – Border with Rounded Corners (border-radius)

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

✅ This creates rounded corners for a softer appearance.

7. Example – Removing Borders

To remove a border, you can set:

.box {
  border: none;
}

✅ This removes any existing border.

8. Best Practices

✔ Use border shorthand for cleaner code.
✔ Always include border-style, otherwise, the border won’t appear.
✔ Use rgba() or hsla() for transparency effects.
✔ Combine with border-radius for modern designs.