{"id":8505,"date":"2026-02-09T11:21:12","date_gmt":"2026-02-09T16:21:12","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8505"},"modified":"2026-02-09T11:21:13","modified_gmt":"2026-02-09T16:21:13","slug":"background-patterns-with-css-corner-radius","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/background-patterns-with-css-corner-radius\/","title":{"rendered":"Background Patterns with CSS `corner-radius`"},"content":{"rendered":"\n

The corner-shape<\/code> property in CSS can do some neat designs. Things like vintage tickets, with corners trimmed inwards<\/a>, sci-fi corners<\/a>, tags, and those types of designs are usually comes to mind when we think of the CSS property\u00a0corner-shape<\/code>.<\/p>\n\n\n\n

There are a variety of nice primitive keywords we get with corner-shape<\/code>, like round<\/code> (the default), bevel<\/code>, scoop<\/code>, squircle<\/code>, and the all-powerful superellipse()<\/code><\/a>. It’s actually quite easy to create interesting shapes that can be used for more than corner decorations.<\/p>\n\n\n\n

Think patterned backgrounds.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n
\n

Note<\/strong>: When corner-shape<\/code> isn\u2019t supported by a browser, we can either keep or remove the default rounded corners set by the accompanying border-radius<\/code>.<\/em><\/p>\n\n\n\n

We can do that with CSS’ @supports<\/code> statements like:<\/p>\n\n\n

@supports<\/span> not<\/span> (corner-shape:<\/span> notch) {\n  \/* do something else instead *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div><\/div>\n\n\n\n
The corner-shape<\/code> Property<\/h2>\n\n\n\n
While border-radius<\/code> determines the size of the corner, corner-shape<\/code> specifies its form. Both are needed to get the style. Just as border-radius<\/code>, corner-shape<\/code> affects the borders and shadows of an element.<\/p>\n\n\n\n
It is a shorthand for corner-top-left-shape<\/code>, corner-top-right-shape<\/code>, corner-bottom-left-shape<\/code>, and corner-bottom-right-shape<\/code>.<\/p>\n\n\n\n
Embedding into a Background<\/h2>\n\n\n\n
Here’s the trick! <\/p>\n\n\n\n
We can make HTML elements into a background<\/code> by embedding it through SVG as a data URL. Like this:<\/p>\n\n\n
.element-with-the-background<\/span> {\n  background<\/span>: url<\/span>('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\"><foreignObject width=\"100%\" height=\"100%\"><div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">Styled HTML<\/div><\/foreignObject><\/svg>'<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The unwrapped SVG part of the URL:<\/p>\n\n\n
<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\"<\/span>><\/span>\n  <foreignObject<\/span> width<\/span>=\"100%\"<\/span> height<\/span>=\"100%\"<\/span>><\/span>\n    <div<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/1999\/xhtml\"<\/span>><\/span>Styled HTML<\/div<\/span>><\/span>\n  <\/foreignObject<\/span>><\/span>\n<\/svg<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The trick is to style an element into a desired shape using corner-shape<\/code> and add that markup to a background\u2019s data URL.<\/p>\n\n\n\n
The Shapes<\/h2>\n\n\n\n
Say we want to make a pattern based on a <div><\/code> that has these styles on it:<\/p>\n\n\n
background<\/span>: red<\/span>;\nwidth<\/span>: 30px<\/span>;\naspect-ratio<\/span>: 1;\nborder-radius<\/span>: 30%;\ncorner-shape<\/span>: superellipse<\/span>(-3<\/span>);<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
To reduce code length in the URL, we’ll put all those styles as inline styles right onto the <div><\/code> we’re going to embed into the SVG:<\/p>\n\n\n
<div<\/span> style<\/span>='background:red;width:30px;height:30px;corner-shape:superellipse(-3);border-radius:30%;'<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
All corners get the superellipse(-3)<\/code> style (similar to the scoop design) that are sized by the given border radius of 30%<\/code>.<\/p>\n\n\n\n
Now to use this styled div within SVG, which we can then use in CSS for a background, we’ll put it in a background: url()<\/code> function with a Data URL and repeat it with standard CSS properties.<\/p>\n\n\n
.pattern<\/span> {\n  width<\/span>: 150px<\/span>;\n  aspect-ratio<\/span>: 1<\/span>;\n  background-size<\/span>: 50px<\/span> 50px<\/span>;\n  background-position<\/span>:left 10px<\/span> top 10px<\/span>;\n  background-repeat<\/span>: repeat;\n  background-image<\/span>: url<\/span>(\"data:image\/svg+xml,<svg xmlns='http:\/\/www.w3.org\/2000\/svg'><foreignObject width='30px' height='100%'><div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='background:deepskyblue;width:90%;aspect-ratio:1;corner-shape:superellipse(-1);border-radius:30%;'><\/div><\/foreignObject><\/svg>\"<\/span>);\n  background-color<\/span>: ghostwhite;\n  \/* etc. *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n