css transparent rounded corners separator

Question

I have CSS issue , how i do achieve css rounded corner's as separators thanks. the selected is transparent.

Possible duplicate of [Creating rounded corners using CSS](http://stackoverflow.com/questions/7089/creating-rounded-corners-using-css) — infamoustrey, Sep 13 '16 at 14:33

score 0 · Answer 1 · answered Sep 13 '16 at 15:02

0

If I read your question correctly you mean these 'negative' corners on the grey area?

You could try to play with pseudoelements (:after, :before).

Something like:

li {
    position: relative;
}
li:after {
    background-color: white;
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    bottom: -5px;
    z-index: 1;
    border-radius: 10px;
}

answered Sep 13 '16 at 15:02

strah

6,702
4
33
45

HI, where i have the text , is a selected item ... so basically the selected item should have the border-radius @ the bottom – webmansa Sep 13 '16 at 16:00

score -1 · Answer 2 · answered Sep 13 '16 at 14:30

-1

Where your css selector is try the following:

border-radius: 5px;

This tells the browser to make the borders rounded based on a pixel count you give it. Read more here (W3Schools).

answered Sep 13 '16 at 14:30

infamoustrey

730
8
16

css transparent rounded corners separator

2 Answers2