CSS Border

A border is a line that surrounds an element. It can be used to define the shape of an element and to make it stand out from the rest of the page.

Border Properties

There are four properties that can be used to define a border:

• border-width: Specifies the thickness of the border.
• border-style: Specifies the style of the border (solid, dashed, dotted, etc.).
• border-color: Specifies the color of the border.
• border: A shorthand property that allows you to set above three border properties in one declaration.

Border Styles

The following are some of the most common border styles:

• solid: A solid line.
• dashed: A dashed line.
• dotted: A dotted line.
• double: A double line.
• groove: A 3D grooved effect.
• ridge: A 3D ridged effect.
• inset: A 3D inset effect.
• outset: A 3D outset effect.
• hidden: No border.

Border Width

The border-width property can be set to a specific value (e.g., 1px, 2em), or it can be set to one of the following keywords:

• thin
• medium
• thick

Border Color

The border-color property can be set to any valid CSS color value.

/* Set a solid black border with a width of 2 pixels */
.my-element {
  border: 2px solid black;
}

/* Set a dashed red border with a width of 5 pixels */
.my-element {
  border: 5px dashed red;
}

/* Set a dotted blue border with a width of 10 pixels */
.my-element {
  border: 10px dotted blue;
}

CSS Outline

An outline is a line that surrounds an element, but it does not take up any space on the page. It is drawn outside the element's border, and it is not affected by the element's padding or margin.

Outlines are often used to provide visual feedback for users, such as when an element is focused or hovered over.

The following are the main outline properties:

• outline-style: Specifies the style of the outline (solid, dashed, dotted, etc.).
• outline-width: Specifies the thickness of the outline.
• outline-color: Specifies the color of the outline.
• outline: A shorthand property that allows you to set all three outline properties in one declaration.

/* Set a solid blue outline with a width of 2 pixels */
.my-element {
  outline: 2px solid blue;
}

/* Set a dashed green outline with a width of 5 pixels */
.my-element {
  outline: 5px dashed green;
}

/* Set a dotted red outline with a width of 10 pixels */
.my-element {
  outline: 10px dotted red;
}

Summary

• CSS borders are lines that surround elements, defining their shape and making them stand out.
• Borders can be customized with various styles (solid, dashed, dotted, etc.), widths, and colors.
• CSS outlines are lines that surround elements but do not take up space, drawn outside the element's border.
• Outlines are commonly used for visual feedback, like highlighting elements on focus or hover.