CODEWITHSUNDEEP
htmlcssshapesbox-shadow
SpookyGengar
SpookyGengar

Reputation: 117

CSS Outline Around Shapes

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!

Upvotes: 1

Views: 2914

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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>

Upvotes: 1

Chukwu Remijius
Chukwu Remijius

Reputation: 323

Tell us what you want to achieve so we can know how to help you achieve it. This little change made the blue outline go away and left you circle looking like eclipse

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

Upvotes: 0

Related Questions