How can I make negative border radius with CSS ONLY?

Question

I post this thread, because I need help for something please. I would like to create negative border radius for my navigation links (like this): http://prntscr.com/9vi0b5

As you can see, there is normal border radius at the top, but at the bottom, we have negative border radius. On the image above, two images are used to make the effect, but I want something with CSS only please. Something that I can edit when I want, you know?

Thank you.

Your question is similar to this one: http://stackoverflow.com/questions/20421666/css-borders-with-negative-radius. — Alessio Cantarella, Jan 27 '16 at 14:30
This got closed before I had chance to finish my answer but perhaps something like this would work: https://jsfiddle.net/uos2Lkhz/3/ — Turnip, Jan 27 '16 at 14:39
example used here once http://codepen.io/gc-nomade/pen/RWyGWL box-shadow draws the shape/colors it is upside down, but technic is the same. you can even animate and give differentes shapes — G-Cyrillus, Jan 27 '16 at 15:08
This was supposed to be my answer with a single element. Tested on Chrome only [https://jsfiddle.net/pfsdbbc5/](https://jsfiddle.net/pfsdbbc5/) — Jose Rui Santos, Jan 27 '16 at 15:08

Dionys · Answer 1 · 2016-01-27T14:32:06.547

0

I do not think this is possible.

But a solution could be to use :before and :after to build this effect.

Something like

:before {
  border-bottom-right-radius: 5px;
}

:after {
   border-bottom-right-radius: 5px;
}

edited Jan 27 '16 at 14:32

answered Jan 27 '16 at 14:27

Dionys

3,083
1
19
28

Yes, I know and I will use that, but in the ::before and ::after, I need to put something for the effect. This can't be empty. – Uptop 14 Jan 27 '16 at 14:28
What effect ? You mean `content: " "` ? – Dionys Jan 27 '16 at 14:29
Nope, something to build the negative border radius effect. I think I need to use gradients. – Uptop 14 Jan 27 '16 at 14:29
I edited answer to be more explicit – Dionys Jan 27 '16 at 14:32

How can I make negative border radius with CSS ONLY?

1 Answers1