« Previous
Next »
CSS Borders
The border property is a shorthand syntax in CSS that accepts multiple values for drawing a line around the element it is applied to.
.box {
border: 3px solid red;
height: 200px;
width: 200px;
}
|
Values
The border property accepts one or more of the following values in combination:
border: <border-width> || <border-style> || |
- border-width: Specifies the thickness of the border.
- : A numeric value measured in px, em, rem, vh and vw units.
- thin: The equivalent of 1px
- medium: The equivalent of 3px
- thick: The equivalent of 5px
- border-style: Specifies the type of line drawn around the element, including:
- solid: A solid, continuous line.
- none (default): No line is drawn.
- hidden: A line is drawn, but not visible. this can be handy for adding a little extra width to an element without displaying a border.
- dashed: A line that consists of dashes.
- dotted: A line that consists of dots.
- double: Two lines are drawn around the element.
- groove: Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
- ridge: Similar to groove, but reverses the color values in a way that makes the element appear raised.
- inset: Adds a split tone to the line that makes the element appear slightly depressed.
- outset: Similar to inset, but reverses the colors in a way that makes the element appear slightly raised.
- color: Specifies the color of the border and accepts <rgb()>, <rgba()>, <code><hsl()>, <hsla()>, <hex-color>, <named-color>, currentcolor and <deprecated-system-color></li></ul>
Browser Support
You can count on excellent support for the border property across all browsers.
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
Any | Any | Any | 3.5+ | 4+ | Any | Any |
Related Properties
What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.
- border-collapse: Specifies the spacing between borders on the
element.
- border-image: Allows the use of an image to draw the border instead of a solid color.
- border-radius: Provides control for rounded corners.
More Information
- CSS Backgrounds and Borders Module Level 3 Specification
- Understanding border-image
- A Tale of Border Gradients
« Previous
Next »