How to get different colors with radius inside a single div?

Question

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%);
}

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

userslUv · Answer

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;
}

LinkinTED · Answer

Since you're using a gradient, you won't achieve that.

Here you have two possible options:

1 - use a pseudo element

.bar {
  height: 20px;
  border-radius: 2.5rem;
  background: linear-gradient(to right,  green 0%, green 50%,gray 50%,gray 100%);
  position: relative;
}
.bar::after {
  content: ' ';
  position: absolute;
  left: 50%;
  margin-left: -10px;
  height: 20px;
  width: 20px;
  border-radius: 2.5rem;
  background-color: green;
}

2 - use two elements

.bar {
  height: 20px;
  border-radius: 2.5rem;
  background: gray;
  position: relative;
}
.progress {
  width: 50%;
  height: 100%;
  border-radius: 2.5rem;
  background-color: green;
}

Temani Afif · Answer

If you want to use gradient do it like below:

.bar{
  --p: 50%;

  height: 20px;
  border-radius: 2.5rem;
  margin: 10px;
  background: 
    radial-gradient(circle closest-side at var(--p) 50%,green 98%,#0000),
    linear-gradient(green 0 0) left/var(--p) 100% no-repeat
    #ddd; 
}

How to get different colors with radius inside a single div?

3 Answers