Syntax
border: width style color;
border-radius: length;Examples
The border Shorthand
Setting width, style, and color in one declaration.
.box { border: 2px solid #333; }
.dashed { border: 1px dashed #999; }
.top-only { border-top: 3px solid blue; } /* individual sides */border-radius Variations
Rounding corners uniformly or individually.
.rounded { border-radius: 8px; } /* all four corners */
.pill { border-radius: 999px; } /* fully rounded ends */
.circle { border-radius: 50%; } /* on a square element, makes a circle */
.custom { border-radius: 8px 8px 0 0; } /* top-left top-right bottom-right bottom-left */Parameters and values
- border-width (length): Thickness of the border
- border-style (solid | dashed | dotted | none): Line style of the border
- border-color (color): Color of the border
- border-radius (length | %): Rounds the corners of the border box
Best practices
- Use border-radius: 50% on an element with equal width and height to create a perfect circle
- Use a very large border-radius value (like 999px) as a common trick for reliably pill-shaped buttons regardless of their size
- Remember border-style must be set (border defaults to none) or the border will not render even with width and color set
- Use individual longhand properties (border-top, border-left) when only specific sides need a border, rather than setting border then overriding with border: none on other sides
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Color Values
CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.Background Properties
Background properties control an element's background color and image. background-image sets one or more images, background-size controls their scaling, background-position controls placement, and background-repeat controls tiling. Multiple backgrounds can be layered by comma-separating values.Gradients
CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.box-shadow
box-shadow adds one or more drop shadows to an element's box, accepting horizontal offset, vertical offset, blur radius, optional spread radius, and color. The inset keyword flips the shadow to render inside the element instead of outside. Multiple shadows can be layered by comma-separating values, useful for realistic elevation effects.
CSS supports several ways to specify color: named colors, hexadecimal, rgb()/rgba(), hsl()/hsla(), and the modern color functions oklch() and color-mix(). All accept an alpha channel for transparency. oklch() is increasingly preferred because it produces more perceptually uniform, predictable color adjustments than older formats.Background Properties
Background properties control an element's background color and image. background-image sets one or more images, background-size controls their scaling, background-position controls placement, and background-repeat controls tiling. Multiple backgrounds can be layered by comma-separating values.Gradients
CSS gradients generate smooth transitions between colors without needing an image file. linear-gradient() transitions along a straight line/angle, radial-gradient() transitions outward from a center point, and conic-gradient() transitions around a center point like a color wheel. Gradients are used as background-image values.box-shadow
box-shadow adds one or more drop shadows to an element's box, accepting horizontal offset, vertical offset, blur radius, optional spread radius, and color. The inset keyword flips the shadow to render inside the element instead of outside. Multiple shadows can be layered by comma-separating values, useful for realistic elevation effects.