css - border on only a quarter of a circle shape?

I'm trying to create a rectangle with indented corners. So I have a relatively positioned rectangle with a colored background. I then absolutely positioned a circle in each corner, which gives the impression of indented corners on the rectangle. This works great as long as I keep the background color on the rectangle and circle are white, matching the page background.

But I'd like to have the background of the rectangle and circles both be white, matching the page background, and have borders on both of them. but when I do that, the rectangle's border appears around the circles. I've experimented with z-index, but that's not working. Any suggestions? Thank you.

Here is the relevant code:

<style>
#rect {width:200px; height: 300px;background-color: #fff;position: relative;overflow: hidden;     border:1px solid #747474;}
.circle {border-radius: 50%; background-color: #fff; border: 1px solid #747474; width: 50px;height:  50px;position: absolute;}
.topleft {top: -10px;left: -10px;}
.topright {top: -10px;right: -10px;}
.bottomleft {bottom: -10px;left: -10px;}
.bottomright {bottom: -10px;right: -10px;}
</style>
</head>
<body>
<div id ="rect">
<div class ="circle topleft"></div>
<div class ="circle topright"></div>
<div class ="circle bottomleft"></div>
<div class ="circle bottomright"></div>

</div>

Solution

You can use this:

#rect {
  width: 200px;
  height: 300px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
#rect:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #747474;
}
.circle {
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #747474;
  width: 50px;
  height: 50px;
  position: absolute;
}
.topleft {
  top: -10px;
  left: -10px;
}
.topright {
  top: -10px;
  right: -10px;
}
.bottomleft {
  bottom: -10px;
  left: -10px;
}
.bottomright {
  bottom: -10px;
  right: -10px;
}

<div id="rect">
    <div class ="circle topleft"></div>
    <div class ="circle topright"></div>
    <div class ="circle bottomleft"></div>
    <div class ="circle bottomright"></div>
</div>

JSFiddle Demo

The problem is that with overflow: hidden, circles can't overlap #rect's border. Then, remove that border and add it to a pseudo-element instead.