CSS Border Generator

CSS Border Property Overview

The CSS border property is a shorthand for defining an element's border, encompassing border-width, border-style, and border-color in a single line of code. Utilize this property to enhance your web designs with diverse border options.

Constituent Properties

This shorthand property combines the following CSS properties:

• border-width
• border-style
• border-color

Usage Syntax

/* style */border: solid;/* width | style */border: 2px dotted;/* style | color */border: outset #f33;/* width | style | color */border: medium dashed green;/* Global values */border: inherit;border: initial;border: revert;border: revert-layer;border: unset;

Understanding Border Values

The border property can be set using one to three of the following values, and the order does not affect the result:

• : Determines the thickness of the border (default is medium).
• : Specifies the style of the border (default is none).
• : Sets the border's color (default is currentcolor).

Note that if the border style is not defined, the border will remain invisible.

Additional Information

Shorthand properties, like border, will set any omitted sub-values to their initial values. It's important to remember that border cannot define custom values for border-image, which defaults to none.

The border property is particularly useful when you want uniform borders. To specify different styles for each side, utilize longhand properties like border-width, border-style, and border-color, or target individual borders using properties like border-top.

Comparison: Borders vs. Outlines

While similar, borders and outlines have distinct characteristics:

• Outlines do not occupy space, appearing outside the element's content.
• Outlines do not have to be rectangular, though they usually are.

Formal Definition and Initial Values

The initial values for the border property are as follows:

• border-width: medium for all sides
• border-style: none for all sides
• border-color: currentcolor for all sides

The border property applies to all elements and is not inherited.

Examples of Border Usage

Here's an example of setting a pink outset border:

I have a border, an outline, and a box shadow! Amazing, isn't it?
div {border: 0.5rem outset pink;outline: 0.5rem solid khaki;box-shadow: 0 0 0 2rem skyblue;border-radius: 12px;font: bold 1rem sans-serif;margin: 2rem;padding: 1rem;outline-offset: 0.5rem;}

Specifications and Compatibility

For further details, refer to the CSS Backgrounds and Borders Module Level 3 for specifications and browser compatibility information.