I am looking to create a unique box design that features borders on the left and right sides with rounded corners. I also want to have different colors for each border.
When viewing the box in Chrome, the corners appear correctly except for some thin white lines. However, in Safari, there seems to be some rendering issues, especially with the left border where the radius is cut off, but you can see the color of the right border as a straight line on the left side (it's actually the color of the right border).
To get a better idea, please take a look at these two screenshots:
https://i.sstatic.net/LWMZP.png
https://i.sstatic.net/mjW4q.png
For further reference, here is a link to the CodePen I created:
https://codepen.io/Regnalf/pen/rNPPovV
Below is an example of the HTML and CSS code I used:
<article>
<div class="t">Box</div>
<div class="c">Content</div>
</article>
CSS:
body
{
background-color: #eee;
}
article
{
background-color: white;
width: 10em;
border-radius: 1em;
overflow: hidden;
border-left: 5px solid #00aaa1;
border-right: 5px solid #005b74;
}
.t
{
color: white;
background-image: linear-gradient(90deg, #00aaa1, #005b74);
}
.t, .c {padding: 0.5em;}
I'm wondering if there is a way to make this design render properly in Safari as well. And ideally, it would be great if we could eliminate those thin white lines in Chrome too!