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.
When adding border-radius to an element with a transparent border, Chrome seems to double up opacity on the corners, making them translucent.
Code and example at: http://jsfiddle.net/shodan_uk/LMPMg/
Anybody got any ideas how to get round this?
Cheers,
Terry
This is a known bug of Webkit, you can either add a wrapping container to fake the border and apply border-radius, or change the opacity value or the border slightly (this will produce some faint lines on the corner of your element.
See demo here: http://jsfiddle.net/duopixel/hG9W8/
And here is the a similar question to yours:
Weird border opacity behavior in Webkit?