Here on this development site (http://mfdev.motivationfactor.com), I'm using Chris Coyer's tip for putting a transparent border with rounded corners on a div.
Well you need to add browser prefixes at this time, because non prefixed is more for future proofing (isn't functional right now). Also, just for the sake of efficiency. saying border-radius: 10px; is the same as saying border-radius: 10px 10px 10px 10px; however is just extra typing. I assume you know that for each value of 10, or whatever number it is, is for each corner of the box. Declaring just browser-radius: 10px tells the browser to keep adding that value to each corner till it runs out.
That's strange, I still can't get it to work, even when I put every prefix under the sun on them. Any chance you could share the code you used? Here's what I was experimenting with.
It's a chrome bug for now. You can get it to work by nesting two elements. It works in Canary so I assume we'll all see it soon. It's a webkit thing. I found the bug on their website but accidentally Xed it out.
As an aside, I would highly recommend that you avoid the use of extra markup for styling purposes. It isn't semantic, and it is blurring the lines between content and style.
Yeah, I thought it must be a bug if it was still not working with all of those prefixes. Ah well, at least it's not essential functionality. By the way, I'm using Chrome 23.0.1271.101 on OSX 10.7.5
I'm but a poor uni student. Maybe Santa will drop it down the chimney for me. To be honest, I just haven't had the energy to upgrade and if it's anything like iTunes 11, I'm not going to run towards it hehe
@joshuanhibbert I'm glad you said > I would highly recommend that you avoid the use of extra markup for styling purposes. Yes, it's not a good practice and I'll avoid it.
@chrisburton, I thought the same thing and cleared my cache - but maybe I just need to do it again. Will do.
It's a regression in Chrome. Works fine for me in Stable and dev build, but in Canary the corners are not rendering properly. Things break often in Canary but are fixed before moving to stable. I'm on mountain lion, mac, retina.
Here on this development site (http://mfdev.motivationfactor.com), I'm using Chris Coyer's tip for putting a transparent border with rounded corners on a div.
(http://css-tricks.com/transparent-borders-with-background-clip/)
It looks as desired in Firefox: rounded background, rounded border.
But in Chrome, the background has square corner that interrupt the border curve.
Does anyone know how to fix this?
Thanks
Here are the relevant style rules:
.widget_imperfect_quote h3.widget-title { background-clip: padding-box; background-color: black; border: 3px solid rgba(0, 0, 0, 0.3); border-radius: 10px 10px 10px 10px; padding: 10px; width: 60%; }Well you need to add browser prefixes at this time, because non prefixed is more for future proofing (isn't functional right now). Also, just for the sake of efficiency. saying border-radius: 10px; is the same as saying border-radius: 10px 10px 10px 10px; however is just extra typing. I assume you know that for each value of 10, or whatever number it is, is for each corner of the box. Declaring just browser-radius: 10px tells the browser to keep adding that value to each corner till it runs out.
That is how i got it to work.
I haven't checked yet, but this is probably the same media query error?
That's strange, I still can't get it to work, even when I put every prefix under the sun on them. Any chance you could share the code you used? Here's what I was experimenting with.
It's a chrome bug for now. You can get it to work by nesting two elements. It works in Canary so I assume we'll all see it soon. It's a webkit thing. I found the bug on their website but accidentally Xed it out.
@David_Leitch, thanks, that's amazing. So, if I'm to get it to work by nesting two elements, I could do something like:
and then style
What version of Chrome are you using? It's working fine for me on 23.0.1271.97 (only using a single element).
23.0.1271.97 on a mac And the corners of the fill are still square for me.
Weird that it's working fine for me, on OS X and Windows…
I know that it used to be a transparency issue, but that it's fixed in the latest versions of Chrome.
Have you thought about rounding the corners of the element by
1pxand using abox-shadowinstead? http://jsfiddle.net/joshnh/6WPrC/As an aside, I would highly recommend that you avoid the use of extra markup for styling purposes. It isn't semantic, and it is blurring the lines between content and style.
Yeah, I thought it must be a bug if it was still not working with all of those prefixes. Ah well, at least it's not essential functionality. By the way, I'm using Chrome 23.0.1271.101 on OSX 10.7.5
Good idea, @joshuanhibbert
@David_Leitch No Mountain Lion?
I'm but a poor uni student. Maybe Santa will drop it down the chimney for me. To be honest, I just haven't had the energy to upgrade and if it's anything like iTunes 11, I'm not going to run towards it hehe
OS X upgrades are fairly seamless. It's not a huge difference, but I like it.
It's working for me now but it wasn't before.
@bluej Try clearing your cache first in case you made updates and are just not seeing them.
@joshuanhibbert I'm glad you said > I would highly recommend that you avoid the use of extra markup for styling purposes. Yes, it's not a good practice and I'll avoid it. @chrisburton, I thought the same thing and cleared my cache - but maybe I just need to do it again. Will do.
Thanks so much everyone.
No worries, good luck with it!
@Bluej:
It's a regression in Chrome. Works fine for me in Stable and dev build, but in Canary the corners are not rendering properly. Things break often in Canary but are fixed before moving to stable. I'm on mountain lion, mac, retina.
This is how it looks when I added all of Chris's prefixes on Chrome 23.0