Issue with border radius of scrollbar in textarea in React

I wanted to put some space between scrollbar and edge of textarea and have this code:

export const Textarea = styled.textarea`
  font-family: Open Sans, sans-serif;
  font-size: 16px;
  line-height: 24px;
  border-radius: 14px;
  width: 600px;
  height: 200px;
  border-width: 0px;
  border: 1px solid #DCDCDC;
  padding: 14px 16px;
  left:-100px;
  resize: none;
  box-sizing: border-box;
  ::-webkit-scrollbar {
    width: 8px;
    height: 60px;
  }
 
  ::-webkit-scrollbar-thumb {
  background-color: #3AA4A4;
  border-radius:2px;
  border-right: 4px white solid;
  background-clip: padding-box;
  }
  ::-webkit-scrollbar-track {
      margin-top: 20px;
      margin-bottom: 20px;
  }
  :focus {
    outline: none;
  }

  :placeholder {
    color: #96a2ac;
  }
`;

but the problem is the space was added but border radius of scrollbar of top right and bottom right is not added and visible.