1

I need to achieve this exact thing, but with the border-radius that has the ::after on the ::before

.title {
    position: relative;
    display: inline-block;
    margin-bottom: 4.2rem;
    padding: 0.8rem 4rem;
}

.title:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient( 90deg, rgba(208, 27, 108, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 5rem;
}

.title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-radius: 5rem 0rem 0rem 5rem;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, red, rgba(0, 0, 0, 0)) 1 4%;
    z-index: -1;
}
<h1 class="title">This an awesome title</div>

Should look like this (please ignore the background under "reach")
enter image description here

But for some reason the border-radius: 5rem 0rem 0rem 5rem; is ignored,

Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • For whom closed the question, I already saw that other question and I'm already using an absolute positioned `before` or `after` also all of the answers there or don't explain or have additional effects so its no clear to understand – Toni Michel Caubet Jan 31 '22 at 16:35

0 Answers0