I'm having a problem with border-radius and an inset box-shadow. (I left out the -moz and -webkit copies to shorten my example since I can fix those after the main problem is solved. I'm viewing this CSS using the latest Firefox.) ---Here's what's in my stylesheet--- html { margin: 60px; } div { -moz-user-focus: normal; -moz-user-select: none; margin: 20px; width: 300px; height: 18px; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 8px; box-shadow: 0 0 2px rgba(255, 255, 255, 0.4) inset, 0 4px 6px rgba(255, 255, 255, 0.4) inset, 0pt 11px 0 -2px rgba(255, 255, 255, 0.2) inset, 4px 4px rgb(0, 0, 0) inset, -4px -4px rgb(0, 0, 0) inset, 0pt 13px 8px rgba(0, 0, 0, 0.3) inset, 0pt 1px 0px rgba(0, 0, 0, 0.2); } ---Here's the HTML--- <div tabindex="1" style="background: yellow;"></div> ---Here's a picture of my problem--- The outer corners are rounded like I want but the inset part is elliptical. How can I make it so that all the inset and outer edges are rounded the same way?
The problem is your "wild" set of box-shadows with really weird values. Read here about the correct usage: http://www.w3.org/TR/css3-background/#the-box-shadow It is not a good idea to use inset on a small container like this... with such values. Maybe you show us a graphic what you want to achieve.
Take my image provided and as the black outside borders are rounded, make the inside yellow borders rounded to match it. Make the inside rounded like the outside is. And thanks for taking even a vague interest in my post.
What CSM is trying to say is there is not enough room to achieve what you want. You are going to need to enlarge the outer box because the inner is too large and getting clipped.