I'm quite new to HTML and CSS, but can't find anything or hardly anything on this question. I have a drop down menu, which already has rounded corners. But how do I get the options to be in a rounded box?

[![enter image description here](https://i.stack.imgur.com/DV37q.png)](https://i.stack.imgur.com/DV37q.png)

(This square box should be rounded)

```css
select{
  width: 285px;
  height: 40px;
  margin-top: 20px;
  border-color: purple;
  cursor: pointer;
  border-radius: 20px;
 }
```

```html
<div>
  <select name="color" class="selectBox" id="color">
    <option value="" disabled hidden selected>select color</option>
    <option value="red"> red </option>
    <option value="blue"> blue </option>
    <option value="green"> green </option>
    <option value="yellow"> yellow </option>
  </select>
</div>
```