Jon Peterson
LightNews LightNews
jonpeterson.dev
Jon Peterson
@jonpeterson.dev
7 followers 9 following 3 posts
he/him

This section intentionally blank until I get around to taking a halfway recent selfie.
Posts Replies Media Videos
jonpeterson.dev
Here's the example I threw together for that image.
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
November 17, 2024 at 7:49 PM
jonpeterson.dev
The border radius on the inner elements is the same as the outer elements, leading to an oddly shaped space between the two borders since the internal box is butted up into a corner. Adjusting your internal radius proportionally to the inset makes for a consistent distance between the two elements.
Two rectangular shapes with curved corners. The first one is labeled "Border radii equal" and the external curve's radius matches the internal one, leading to the edge width of the shape being notably larger in the diagonal directions than in vertical and horizontal directions. The second one is labeled "Border radii proportional" and the internal curve's radius is smaller than the external one by an amount equal to the width of the shape's edge, causing the edge width to be equal all through the corner.
November 17, 2024 at 7:49 PM