CSS Border:

CSS borders are used to create visual separation between elements by adding a boundary around them. Borders can have different styles, colors, and thicknesses to enhance the design of a webpage.

1️⃣ CSS Border Properties

Property	Description
`border`	A shorthand for all border properties.
`border-width`	Sets the thickness of the border.
`border-style`	Defines the style of the border (solid, dashed, etc.).
`border-color`	Specifies the color of the border.
`border-radius`	Rounds the corners of the border.

2️⃣ Border Properties with Examples

1. Border Style (`border-style`)

The border-style property defines the appearance of the border.

p {
  border-style: solid;
}

✅ Common Border Styles:

solid → A continuous line
dotted → Dots
dashed → Dashes
double → Two solid lines
groove → 3D effect (like carved in)
ridge → 3D effect (like raised)
inset → Appears pressed in
outset → Appears raised

2. Border Width (`border-width`)

Controls the thickness of the border.

div {
  border-style: solid;
  border-width: 5px;
}

✅ You can specify:

Pixels (e.g., 2px, 5px, 10px)
Thin, medium, thick

💡 You can also specify different widths for each side:

div {
  border-width: 2px 4px 6px 8px; /* top, right, bottom, left */
}

3. Border Color (`border-color`)

Sets the color of the border.

h1 {
  border-style: solid;
  border-color: blue;
}

✅ Colors can be defined using:

Named colors (red, blue, green)
HEX codes (#ff0000)
RGB (rgb(255, 0, 0))
RGBA (rgba(255, 0, 0, 0.5))

💡 You can also set different colors for each side:

h1 {
  border-color: red green blue yellow; /* top, right, bottom, left */
}

4. Border Radius (`border-radius`)

Rounds the corners of an element.

button {
  border: 2px solid black;
  border-radius: 10px;
}

✅ Common Values:

0px → Square edges
10px → Slightly rounded
50px → Fully rounded
50% → Creates a circle if the element is square

💡 Example of a circular border:

img {
  border: 5px solid black;
  border-radius: 50%;
}

5. Border Shorthand (`border`)

Instead of writing multiple properties, you can use shorthand:

p {
  border: 3px solid red;
}

💡 Format: border: [width] [style] [color];

✅ Equivalent to:

p {
  border-width: 3px;
  border-style: solid;
  border-color: red;
}

6. Individual Borders (`border-top`, `border-right`, `border-bottom`, `border-left`)

You can style individual sides:

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

3️⃣ Summary Table

Property	Example	Description
`border-style`	`border-style: dashed;`	Defines the style (solid, dashed, etc.)
`border-width`	`border-width: 5px;`	Controls thickness
`border-color`	`border-color: blue;`	Sets border color
`border-radius`	`border-radius: 10px;`	Rounds the corners
`border` (shorthand)	`border: 3px solid red;`	Combines width, style, and color
`border-top`	`border-top: 2px solid blue;`	Styles only the top border
`border-right`	`border-right: 4px dashed green;`	Styles only the right border
`border-bottom`	`border-bottom: 3px double black;`	Styles only the bottom border
`border-left`	`border-left: 5px dotted orange;`	Styles only the left border

Conclusion

CSS borders help define element boundaries with different styles, widths, and colors. The border-radius property allows for rounded corners, making elements more visually appealing.

CSS

CSS Border:

1️⃣ CSS Border Properties

2️⃣ Border Properties with Examples

1. Border Style (border-style)

2. Border Width (border-width)

3. Border Color (border-color)

4. Border Radius (border-radius)

5. Border Shorthand (border)

6. Individual Borders (border-top, border-right, border-bottom, border-left)