CSS Borders and Outlines

🧑‍🎨 What are CSS Borders and Outlines?

Borders and outlines are used to visually define an element's edges. While both serve similar purposes, there are key differences:

• Borders are part of the element's box model and affect layout.
• Outlines are drawn outside the element's box and do not affect layout.

🎨 Border Properties

CSS offers several properties to customize borders:

border-style

Defines the style of the border. Common values include solid, dashed, dotted, double, groove, ridge, inset, and outset.

div {
  border-style: solid;
}

border-width

Defines the width of the border. You can set specific widths for each side (top, right, bottom, left) or use a shorthand property.

div {
  border-width: 2px;
}

border-color

Sets the color of the border. You can use color names, HEX values, RGB, RGBA, or HSL color values.

div {
  border-color: #06abeb;
}

border-radius

The border-radius property is used to create rounded corners. You can define a uniform radius for all four corners or specify different values for each corner.

div {
  border-radius: 12px;
}

You can also create elliptical borders by providing two values for horizontal and vertical radii:

div {
  border-radius: 50px 25px;
}

🔶 Outline Properties

Outlines are similar to borders but are drawn outside the element's box and do not impact layout. They are useful for focus states and accessibility.

outline

The outline property is a shorthand for outline-color, outline-style, and outline-width. It is often used to apply a single outline around an element.

div {
  outline: 2px solid red;
}

outline-width

Defines the width of the outline. Common values are thin, medium, and thick, or you can set a specific pixel value.

div {
  outline-width: 3px;
}

outline-style

Specifies the style of the outline. Common values are solid, dashed, dotted, double, and more.

div {
  outline-style: dashed;
}

outline-color

Sets the color of the outline. You can use color names, HEX, RGB, RGBA, or HSL values.

div {
  outline-color: blue;
}

🔄 Border Shorthand

You can combine the border properties into a single shorthand property:

div {
  border: 2px solid #06abeb;
}

This shorthand combines the following:

• border-width: 2px
• border-style: solid
• border-color: #06abeb

For border-radius, you can also use shorthand to define rounded corners:

div {
  border-radius: 12px;
}

🧑‍🎨 Key Takeaways

🧪 Try Yourself

// No additional functionality needed for Borders and Outlines example.
console.log('CSS Borders and Outlines Example Loaded');