The CSS border-radius property curves an element’s corners. A small value, such as `border-radius: 4px`, softens a card or link without dramatically changing its shape. The right amount of curve depends on the design: rounded corners can make a credit card look more natural, but too much rounding can make an interface feel overly playful. section 5.4.1 section 9.6
Give a card and its details different curves
Try `border-radius: 15px` on the sides of a virtual credit card, then `border-radius: 4px` on its white security-code band. The larger curve shapes the card; the smaller one keeps the detail consistent without giving it equal visual weight. section 9.6
To make a square image circular, set `border-radius: 50%`. For a profile picture, equal width and height establish the square, while `object-fit: cover` keeps the picture from distorting. Radius changes the visible shape; it does not replace image sizing. section 6.5.1
The same contrast works in custom form controls: a radio input gets `border-radius: 50%`, while a checkbox gets `border-radius: 4px`. The radio button’s inner disk also gets a 50% radius so it stays round in both hover and checked states. section 10.3.3 section 10.3.7
One declaration can set each corner separately: `border-radius: 20px 100px 10px 20px`. Read the values clockwise, starting at the top-left corner. section 12.3.4
A circular floated image does not automatically make nearby text follow its curve. Add `shape-outside: margin-box` when the text should wrap around the rounded contour while respecting the image’s margin. section 7.3.3
Listing 10.9 Styled radio and checkbox inputs
input[type="radio"],
input[type="checkbox"] {
appearance: none;
background-color: var(--background);
margin: 0;
width: 1.75em;
height: 1.75em;
border: 1px solid currentcolor; #1
display: inline-grid; #2
place-content: center; #2
}
input[type="radio"] { border-radius: 50% }
input[type="checkbox"] { border-radius: 4px }
Compare the 50% radius on a radio input with the 4px radius on a checkbox; both controls otherwise share the same base rule. section 10.3.3
