Box-shadow and border-radius bug in Chrome

Posted by Klaster_1 on Stack Overflow See other posts from Stack Overflow or by Klaster_1
Published on 2010-05-30T06:15:36Z Indexed on 2010/05/30 6:22 UTC
Read the original article Hit count: 358

Filed under:

google-chrome

|

css3

|

box-shadow

|

border-radius

Hello,

I've been experimenting with CSS3 and found something strange. Heres's the part of DIV style:

border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;

Rendering in Opera and Firefox are same and perfect:

alt text

But Chrome renders shadow outside the border:

alt text

Is it supposed to be so or I missed something important?

© Stack Overflow or respective owner

Related posts about google-chrome

uninstall google chrome in fedora

as seen on Super User - Search for 'Super User'
Yesterday I installed Fedora 15 Beta with GNOME 3 - it works well. One problem though is that I installed Chrome 32-bit (which was wrong, should have been the 64-bit version) and now I can't uninstall it. I can't find it in Add/Remove Software, and I also can't install the correct version of Chrome… >>> More
Google chrome cannot be installed

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I downloaded latest version of google chrome and then tried to install it. However it gave me errors. I searched through the net and noticed that most of the people's problem solved when they installed missing dependecies. Therefore I tried to install them too but seems like it does not work. zero@ubuntu:~/Downloads$… >>> More
Google Chrome installation error

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I used to use google chrome as default browser. One day I tried to use Google Cast extension to send my browser screen to chromecast, but I realized that my Chrome version was old. So I downloaded the debian package from google web site, but I ran on a dependency failure: $ sudo dpkg -i /home/plinio/Downloads/google-chrome-stable_current_amd64… >>> More
Unable to install Google Chrome

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I receive this in my terminal when I try to install using wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb sudo dpkg -i google-chrome* or sudo dpkg --install /Path/to/chrome.deb I receive Selecting previously unselected package google-chrome-stable. (Reading database… >>> More
Javascript for Google Chrome detecting & Enable javascript in Google Chrome

as seen on Stack Overflow - Search for 'Stack Overflow'
hi all, My application's JavaScript is working on Firefox and IE but it is not working in Google Chrome. Is it problem of enable javascript in Google chrome? or I must put any code in javascript for getting XMLHttpRequest Object of Google chrome browser. >>> More

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More