Border-radius
The CSS border-radius property specifies the radii of an element’s corners, producing rounded corners.
Tiny CSS Projects
The CSS border-radius property controls the curvature of an element's corners.
- How it is used
- Shapes corners to soften cards and links, make portraits circular, and distinguish custom radio buttons from checkboxes.
- How deep it goes
- Works through pixel and percentage values, four-corner shorthand, and curved text wrapping; does not examine rendering internals.
- Examples
- Uses a profile portrait, virtual credit card, radio button, and checkbox to show different amounts of rounding.
- What you can do after
- Build it from scratch: choose radii for UI elements and combine a circular image with curved text wrapping.
Web Design Playground, Second Edition
The CSS border-radius property rounds the corners of an element's border box.
- How it is used
- Styles navigation links as button-like controls with rounded corners.
- How deep it goes
- Defines measurement and percentage values, including 50%, without detailing multi-value corner syntax.
- Examples
- Uses portfolio, About, and Contact navigation links styled through a .btn CSS rule.
- What you can do after
- Apply it via CSS to round an element’s corners and create button-like links.
Read how Web Design Playground, Second Edition explains border-radius →
CSS in Depth, Second Edition
The CSS border-radius property specifies the radii of an element's rounded corners.
- How it is used
- Scales rounded corners with component typography when padding and other dimensions should resize together.
- How deep it goes
- Explains computed values and demonstrates em scaling across differently sized boxes and a panel.
- Examples
- Uses small and large boxes plus a coffee panel with relative padding, borders, headings, and rounded corners.
- What you can do after
- Apply it via CSS to build rounded components whose corners scale predictably with local typography.
Read how CSS in Depth, Second Edition explains border-radius →
Related concepts
- style propertykind of · A style property is a named setting or interface attribute that specifies or exposes a presentation characteristic of an element or view.
- emconfigured by · The em is a CSS relative length unit whose computed value is based on the applicable font size.
- shorthand propertyuses · A CSS shorthand property sets multiple related longhand properties in a single declaration, resetting omitted properties to their initial values.
- circleconfigures · A circle is a plane curve consisting of points at a fixed distance from a common center.
- cardconfigures · A card is a reusable user-interface component that presents related information and controls in a compact, visually distinct unit.
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.