Line appears with overflow: hidden and border-radius
Archived a month ago
S
shaina
Verified
I'm experiencing an issue where a thin black line appears at the border of a child element when using CSS overflow: hidden combined with border-radius.
Any solutions or insights would be greatly appreciated.
```
<a class="button">
<div class="inner">
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 36 36"
fill="none"
class="deco-left"
>
<path
d="M3.14722e-06 36L0 3.14722e-06L36 0L3.14722e-06 36Z"
fill="#8E66CC"></path>
<path
d="M3.14722e-06 33L2.62267e-07 2.88495e-06L33 0L3.14722e-06 33Z"
fill="#FF6D8F"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 36 36"
fill="none"
class="deco-right"
>
<path d="M36 0V36H0L36 0Z" fill="#8E66CC"></path>
<path d="M36 3V36H3L36 3Z" fill="#A1E986"></path>
</svg>
<span class="text">Button</span>
</div>
</a>
<style lang="scss">
.button {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 2px 8px;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
color: var(--text-white);
text-decoration: none;
background: linear-gradient(90deg, #ffe26d 0%, #52ff58 50%, #86b6e9 100%);
border-radius: 999px;
transition:
background-color 0.2s ease-out,
color 0.2s ease-out,
border-color 0.2s ease-out;
& .inner {
position: relative;
display: flex;
gap: 8px;
align-items: center;
padding: 20px 32px;
overflow: hidden;
background-color: #252525;
border-radius: 120px;
& .deco-left {
position: absolute;
top: 0;
L left: 0;
}
& .deco-right {
position: absolute;
right: 0;
bottom: 0;
}
}
}
.text {
display: flex;
flex-wrap: wrap;
}
</style>
```
