A CSS border defines the line surrounding an element’s padding and content. Use it to separate content, shape controls, remove browser defaults, or create visual emphasis. section 10.2 section 4.1.5
Common border techniques include:
- Remove an unwanted browser border with `border: 0` or `border: none`, while retaining the element’s semantics and accessibility. section 10.2 section 10.7
- Combine width, style, and color, such as `border-top: 3px solid #333333`, and add padding to create breathing room. section 4.1.5
- Use `border-radius` to curve corners or make equal-width and equal-height links circular with `border-radius: 50%`. section 11.5.3 section 10.7
- Reserve space for an interactive border with a transparent default border, then change its color on hover or focus to prevent layout shifts. section 11.5.3
- Create a gradient border effect with `border-image`, while retaining a solid `border-bottom` color as a fallback. section 10.3.1
Full-width publication date
An inline `time` element cannot make its borders span the page. Set `display: block`, then apply centered typography, 3-pixel solid top and bottom borders, and vertical padding to create a visual divider. section 4.1.5
Listing 10.4 Styling input fields that aren’t of type radio or checkbox
input:not([type="radio"], [type="checkbox"]) {
font-size: 1rem;
font-family: inherit;
color: inherit;
border: none; #1
border-bottom: solid 1px var(--primary); #2
border-image: linear-gradient(to right, var(--primary), var(--accent)) 1; #3
padding: 0 0 .25rem;
width: 100%;
}
Inspect a practical input rule using a fallback border color and a gradient `border-image`. section 10.3.1
