My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner. See the white arrow in the image below.
To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.
The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?
NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.