I'm having trouble giving this a border-radius 50px

[asasass]

Without messing up the colors.

Edit fiddle - JSFiddle - Code Playground

.wrapa {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  
}

.wrapa.active {
  background: #ffffff;
}

.wrapa.active::before,
.wrapa.active::after {
  content: "";
  position: absolute;
  top: 0;
  width: 198px;
  height: 44px;
}

.wrapa.active::before {
  left: 0;
  background-color: #00ffff;
}

.wrapa.active::after {
  right: 0;
  background-color: #ff00ff;
}

.wrapa .play,
.wrapa .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.wrapa .lines::before,
.wrapa .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrapa .lines::after {
  left: 399px;
}

.hide {
  display: none;
}

[coothead]

Hi there asasass,

what is the “this” to which you wish to apply a border-radius?

coothead

[asasass]

border-radius: 50px;

right and left borders.

[coothead]

[asasass]

Click on it:

The other side:

That’s where the colors are.

[coothead]

.wrapa {
  position: relative;
  width: 606px;
  height: 50px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  border-radius: 50px;
  overflow: hidden;
}