Adding Borders

Borders are an essential part of web design, allowing you to visually separate or highlight different elements on your page.

To add a border to an HTML element (like a div, p, or img), you use CSS border properties.

The Three Border Components

A border is defined by three main components: its style, width, and color.

• Style: The border-style property is required for a border to show. Values can be set to any of the following:
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
• Width: The border-width property sets the thickness of the border (e.g., 2px, 0.5em, or thick).
• Color: The border-color property sets the color of the border.

Here's an example that demonstrates all three:

The Shortcut: The border Property

Instead of writing out three separate rules, you can use the border shorthand property to set everything in one line. This is the most common way to add borders:

Border Sides

You can also style each side of an element individually by using directional properties like border-top, border-right, border-bottom, and border-left. For example, you can add a border to only the left side of an element:

Border Radius

You can use the border-radius property to create rounded corners on an element. It can be set to a specific value (e.g., 10px) or a percentage (e.g., 50% for a circle).