Border
A CSS border is the visual edge surrounding an element’s content and padding areas, defined by properties such as width, style, and color.
Web Design Playground, Second Edition
A CSS border is the edge region surrounding an element's content and padding, which can be rendered as lines around the element box.
- How it is used
- Separates self-contained content from surrounding page content and helps organize related elements visually.
- How deep it goes
- Explains box-model placement, shorthand syntax, widths, styles, colors, and examples, but defers detailed border-side properties.
- Examples
- Demonstrates a bordered pullquote, a bordered navigation list, and borders used as alternatives to horizontal rules.
- What you can do after
- Build it from scratch by applying border shorthand to separate content and create visible sections.
Read how Web Design Playground, Second Edition explains border →
Tiny CSS Projects
A CSS border is a property or set of properties that defines the line surrounding an element's padding and content.
- How it is used
- Styles forms, buttons, links, fieldsets, and publication dates by removing defaults or adding visual separation and emphasis.
- How deep it goes
- Demonstrates shorthand, sides, radius, gradients, fallbacks, and layout stability, but does not develop border rendering internals.
- Examples
- Uses reset fieldsets, gradient-underlined inputs, rounded buttons, circular share links, and bordered publication dates.
- What you can do after
- Apply it via CSS to build consistent controls, dividers, rounded interfaces, and stable hover or focus treatments.
Build a Website with ChatGPT
The line or edge surrounding an element's content and padding in the CSS box model.
- How it is used
- Uses borders to control the visible edges of element boxes while adding structure to a page.
- How deep it goes
- Explains the border’s box-model position and demonstrates one shorthand declaration with width, style, and color.
- Examples
- Uses a navigation element styled with a 1px solid black border.
- What you can do after
- Apply borders through CSS declarations that specify width, line style, and color.
Web Design Playground
The line that surrounds the outer edge of an element's padding box and separates it from surrounding space.
- How it is used
- Separates self-contained content from nearby page content and strengthens visual organization.
- How deep it goes
- Defines the border’s box-model position and demonstrates shorthand syntax, widths, styles, colors, and a navigation example.
- Examples
- Uses a pullquote rule, a bordered navigation menu, and figures showing borders around actual element content.
- What you can do after
- Apply it via CSS to frame content and signal separation with a chosen width, style, and color.
CSS in Depth, Second Edition
The CSS shorthand property that specifies an element's border width, style, and color.
- How it is used
- Creates concise borders and draws a directional dropdown arrow from a pseudo-element.
- How deep it goes
- Explains shorthand values and border geometry through a worked triangle, without extending into broader border styling.
- Examples
- Uses a dropdown label, a zero-sized bordered element, transparent border sides, and an open-state arrow reversal.
- What you can do after
- Build it from scratch by declaring borders, assigning side values, and constructing a CSS triangle for a dropdown control.
Related concepts
- CSS box modelpart of · The CSS box model represents each element as a rectangular box comprising content, padding, border, and margin areas.
- shorthand propertykind of · A CSS shorthand property sets multiple related longhand properties in a single declaration, resetting omitted properties to their initial values.
- element boxpart of · An element box is the rectangular CSS layout representation of an element, including its content, padding, border, and margin areas.
- box-shadowcontrasts with · The CSS box-shadow property renders one or more shadows around or within an element’s box.
- hypertext linkused by · A hypertext link is a reference embedded in digital content that enables navigation to another resource or location.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.