CSS Borders

What is a CSS Border? A border is a line that goes around the edges of an element. CSS allows you to customize its:

• Width
• Style
• Color
• Radius (for rounded corners)

1. border

A shorthand property that sets width + style + color in one line:

div {
  border: 2px solid black;
}

2. border-width

Controls the thickness of the border:

div {
  border-width: 4px;
}

• You can also control each side separately:
• border-top-width: 2px;
• border-right-width: 5px;

3. border-style

Sets the type of line used:

div {
  border-style: solid;  /* Other options: dashed, dotted, double, groove, ridge, none */
}

4. border-color

Sets the color of the border:

div {
  border-color: blue;
}

You can use:

• Named colors: red
• Hex: #ff0000
• RGB: rgb(255, 0, 0)

5. border-radius

Makes the corners rounded:

div {
  border-radius: 10px;
}

• You can round individual corners too:
• border-top-left-radius: 10px;
• border-bottom-right-radius: 20px;