CODEWITHSUNDEEP
cssfirefox
Rahul Desai
Rahul Desai

Reputation: 15501

How to make the inner white space created by border-radius transparent?

If you check out my fiddle, you may notice the white space created by the border-radius property.

I tried to get rid of it by doing:

background: transparent

but it made it blue instead.

How do I fix this? I need to get it working in Firefox only.

jsFiddle

Upvotes: 0

Views: 410

Answers (1)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13546

Remove the background for pseudo elements and add them thick border of the same color, then increase the border radius to make the inner curve visible:

.tail:after {
  position: absolute;
  content: '';
  top: -10px;
  width: 10px;
  height: 10px;
  border: solid #4196C2;
}

/* ... */

.tail--left:after {
  left: 0;
  border-width: 10px 10px 0 0;
  border-top-right-radius: 20px;
}

/* ... */

.tail--right:after { 
  right: 0;
  border-width: 10px 0 0 10px;
  border-top-left-radius: 20px;
}

See JSfiddle example.

You can even do it without extra spans: http://jsfiddle.net/57nj4t6d/5/

Upvotes: 2

Related Questions