Negative Border Radius in CSS?

Question

I'm trying to do CSS to make a div that looks like this:

I'm pretty much started with this:

.player {
    width: 480px;
    height: 80px;
    border-radius: 40px;
}

Whats the simplest way to do this, without too much code?

Answer 1

Here's yet another way of doing it, this time using a radial background image. This lets it be transparent and works in both Firefox and Chrome.

.player {
  width: 480px;
  height: 80px;
  border-radius: 40px;
  background-image: radial-gradient(circle at 38px 40px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40px, blue 40px);
  color: #FFF;
}

<div class="player"></div>