CSS Borders

In this chapter, we will learn about CSS borders. Borders are used to create lines around elements, providing visual separation and structure to web pages. CSS provides various properties to control the width, style, and color of borders. We will cover:

• Border Width
• Border Style
• Border Color
• Border Shorthand Property
• Individual Border Sides
• Border Radius
• Border Images
• Box Shadows with Borders

Border Width

The border-width property sets the width of an element’s border. You can specify the width in pixels, ems, or other CSS units.

Syntax

element {
  border-width: value;
}

Example

div {
  border-width: 2px;
}

Border Style

The border-style property sets the style of an element’s border. There are several predefined border styles you can use.

Values

• none: No border
• solid: A solid line
• dotted: A series of dots
• dashed: A series of dashes
• double: Two solid lines
• groove: A 3D grooved border
• ridge: A 3D ridged border
• inset: A 3D inset border
• outset: A 3D outset border

Syntax

element {
  border-style: value;
}

Example

div {
  border-style: solid;
}

Border Color

The border-color property sets the color of an element’s border. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA.

Syntax

element {
  border-color: color;
}

Example

div {
  border-color: blue;
}

Border Shorthand Property

The border shorthand property allows you to set the width, style, and color of an element’s border in one declaration.

Syntax

element {
  border: width style color;
}

Example

div {
  border: 2px solid blue;
}

Individual Border Sides

CSS provides properties to set the width, style, and color of individual border sides: border-top, border-right, border-bottom, and border-left.

Syntax

element {
  border-top: width style color;
  border-right: width style color;
  border-bottom: width style color;
  border-left: width style color;
}

Example

div {
  border-top: 2px solid red;
  border-right: 2px solid green;
  border-bottom: 2px solid blue;
  border-left: 2px solid yellow;
}

Border Radius

The border-radius property is used to create rounded corners on an element’s border. You can specify the radius in pixels, percentages, or other CSS units.

Syntax

element {
  border-radius: value;
}

Example

div {
  border: 2px solid blue;
  border-radius: 10px;
}

Example with Elliptical Border Radius

div {
  border: 2px solid blue;
  border-radius: 10px 20px;
}

Border Images

The border-image property allows you to use an image as the border around an element. This provides more flexibility and creativity in designing borders.

Syntax

element {
  border-image: url('path/to/image') slice width outset repeat;
}

Example

div {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}

Box Shadows with Borders

The box-shadow property adds shadow effects around an element’s frame. This can be combined with borders to create depth and emphasis.

Syntax

element {
  box-shadow: h-offset v-offset blur spread color;
}

Example

div {
  border: 2px solid blue;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Conclusion

In this chapter, you learned about CSS borders, including how to set border width, style, and color, use the border shorthand property, apply borders to individual sides, create rounded corners with border-radius, use images for borders, and add shadows with box-shadow. These properties allow you to create visually appealing and structured layouts for your web pages.