Is there way to create inset border radius with css3? (Without images)
I need a border radius like this:
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there way to create inset border radius with css3? (Without images)
I need a border radius like this:
The best way I’ve found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:
The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.
Obviously this depends on support for
rgbaandgradient, and accordingly should be treated as a progressive enhancement, or if it’s essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn’t supportgradienteven up through IE9).