There appears to be a peculiar issue with the sizing of the rect inside the svg element when the page initially loads. Even when resizing the window, which should resize the svg as well, the width of the rect remains unchanged. However, toggling off and on the height or width in the element inspector does update the width of the rect. It's worth noting that this issue is specific to Chrome and Firefox, as it does not occur in Safari.
I'm wondering if there might be a better approach in terms of HTML and CSS to achieve the desired effect. Essentially, I am aiming for a dashed stroke around the box. Unfortunately, using a dashed border is not an option due to the dashes being too narrow.
.box {
background: black;
min-height: 300px;
padding: 65px;
border-radius: 20px;
position: relative;
max-width: 700px;
margin: auto;
}
svg {
width: calc(100% - 46px);
height: calc(100% - 46px);
fill: none;
stroke: white;
stroke-dasharray: 8px;
position: absolute;
top: 23px;
left: 23px;
pointer-events: none;
}
svg rect {
width: calc(100% - 2px);
height: calc(100% - 2px);
}<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='1' y='1' rx='5' />
</svg>
</div>