Hi @Vindo,
Thank you for sharing your feedback with us!
I have submitted a feature request on your behalf.
Thanks for participating in the Community!
-Taylor
Thanks @Taylor Tarpley looking forward to this feature :)
Workaround for this is, use the HTML block with inline CSS for the border radius. Like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Placeholder 2000x800</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f7f7f7;
}
.wrapper {
padding: 0 15px; /* left & right padding */
}
.placeholder {
width: 2000px;
height: 200px;
border-radius: 25px;
display: block;
background-color: #ddd;
object-fit: cover;
}
</style>
</head>
<body>
<div class="wrapper">
<img
class="placeholder"
alt="2000x800 placeholder"
src="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='800'>
<rect width='2000' height='800' fill='%23dddddd'/>
<text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'
font-family='Arial, sans-serif' font-size='72' fill='%23555'>2000 × 800</text>
</svg>"
/>
</div>
</body>
</html>
Not ideal but works. And can be used for other things aswell. Not sure how to this with Shopify product pictures but it might spark some solutions for people.