CSS property: border

Description

Shorthand property for setting the same width, color, and style for all four borders of a box.

See border-top, border-right, border-bottom et border-left.

Syntax

border: <width> || <style> || <color>;

Values

<width>

The border width. The lengths corresponding to thin, medium and thick are not specified, but the values are constant throughout a document and thinmediumthick.

<length>It may not be negative.
thin
medium
thick
<style>

The border style.

noneNo border. Color and width are ignored (i.e., the border has width 0, unless the border is an image, see background-image).
hiddenSame as none, but has different behavior in the border conflict resolution rules for border-collapsed tables.
dottedA series of round dots.
dashedA series of square-ended dashes.
solidA single line segment.
doubleTwo parallel solid lines with some space between them. The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.
grooveLooks as if it were carved in the canvas. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border-color.
ridgeLooks as if it were coming out of the canvas.
insetLooks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in border-collapsed tables.
outsetLooks as if the content on the inside of the border is coming out of the canvas. Treated as groove in border-collapsed tables.
<color>

The border color.

Versions

Examples

p {
    border: 1px solid #f00;
}