border
A border around the element: width, style and color in one property.
Syntax
border: width style color;Values
| Parameter | Type | Description |
|---|---|---|
| width | length | The thickness: `1px`, `3px`. |
| solid | dashed | dotted | double | keyword | The line style; without a style the border is not drawn. |
| color | color | The color; by default the text color. |
Examples
Different line styles:
<p style="border: 2px solid royalblue; padding: 8px;">solid</p>
<p style="border: 2px dashed seagreen; padding: 8px;">dashed</p>
<p style="border: 3px dotted crimson; padding: 8px;">dotted</p>A border on one side only — border-top, border-right, border-bottom, border-left:
<h3 style="border-bottom: 3px solid gold; padding-bottom: 4px;">Only the bottom border</h3>
<p style="border-left: 4px solid gray; padding-left: 8px;">A quote-like block with a left border.</p>Notes
The border adds to the element's size unless box-sizing: border-box is set. If you need a frame that takes no space, for example on focus, use outline.
See also
- border-radius — Rounds the corners of an element.
- outline — An outline around the element that takes no space and does not shift neighbors.
- box-sizing — Whether `width` and `height` include the padding and the border.
- padding — The inner spacing between the content and the border of an element.
Related recipes
In the tutorial
- Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.