I wanted to create a "split" button with a border radius that has a solid border around the two divs but it becomes weird when I tried to zoom in or out

The button looks fine on original zoom, but once I zoom the screen in or out, it will have this weird white space that I can't seem to get rid of. I tried to do overflow: hidden but it doesn't help.

zoomedin/out

<div >
  <div >
    left
  </div>
  
  <div >
    right
  </div>
  
</div>

$brandColor: darkorchid;

body {
  font-family: system-ui;
  background: linear-gradient(to bottom,
    $brandColor,
    darken($brandColor, 15%)
  );
  color: white;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.outerdiv {
  width: 200px;
  display: flex;
  align-items: center;
  background: lightgreen;
  border-radius: 10px;
  border: 2px solid green;
}

.left {
  background: green;
  color:white;
  padding:8px;
  border-radius: 8px 0 0 8px;
}

.right {
  width: 100%;
  text-align: center;
}

codepen: https://codepen.io/2EZHenry/pen/WNyJORV

CodePudding user response：

.left{
 background: green;
 color: white;
 padding: 8px;
 margin: -1px;
 border-radius: 8px 0 0 8px;
}

check above solution. i added some margin in class .left. so the left div will not change when zoom.