CSS Outline Around Shapes

Question

I have the following code in my CSS and HTML files:

.test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 60px 0px white, inset 200px 0px blue;
}

<div class="test"></div>

The shape this code produces is exactly what I want; however, I do not want the blue outline around the white part - is there anyway I can remove that?

To further clarify: here is what the shape currently looks like on a white background, and here is how I would like it to look like.

All help is greatly appreciated!

Answer 1

Perhaps a trick, to overlay a 2px white border over it is acceptable.

.test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
  position:relative;
}
.test:before{
  content:'';
  position:absolute;
  border-radius:50%;
  border:2px solid white;
  z-index:1;
  top:-1px;
  right:-1px;
  bottom:-1px;
  left:-1px;
  pointer-events:none;
}

<div class="test"></div>