I am trying to achieve radius in a single. Well let me show what I am trying and what I want:
.bar{
height: 20px;
border-radius: 2.5rem;
background: linear-gradient(to right, green 0%, green 50%,gray 50%,gray 100%);
}<div class='bar'></div>With this code I am getting the sharp right side with green color. I want a rounded right side where the green color ends. something like :
You can see the smooth round green end
>Solution :
You can achieve it with the help of ::after pseudo-element
.bar{
height: 20px;
border-radius: 2.5rem;
background: gray;
position: relative;
}
.bar::after{
content: "";
position: absolute;
top:0;
left:0;
width: 50%;
height: 20px;
border-radius: 2.5rem;
background: green;
}<div class="bar"></div>