2

CSS 3 Rounded Corner Effect and its Problem

Posted on March 10, 2010 by robbychen


CSS 3 is the next version of CSS. It introduces many cool effects for web developer to use. I learned about CSS 3 long time ago, but had never tried it. As I read more and more about CSS 3 and HTML 5 tutorials around the web, I decide to try to learn CSS 3 first. The problem with CSS 3 and HTML 5 is that Internet Explorer doesn’t support these specifications. My personal solution to this problem is to display a warning message through PHP to encourage IE users to completely give up Internet Explorer and switch to other browsers.

When I first learned about CSS 3, I felt that the language is harder to learn than CSS 2. In fact, it is easier to understand once I tried it through hands-on. As far as I know, CSS 3 relies on two different engine: Mozilla and Webkit. That means that to make it cross-browser compatible (except IE), I need to add two CSS properties with same values but slightly different property names. One for the Mozilla engine, another for the Webkit engine. For example, the following produces a black rectangle that has three rounded corners with drop shadow:

width:550px;
height:500px;
background-color:#8a2bcd;
-moz-border-radius-topleft:200px;
-webkit-border-top-left-radius:200px;
-moz-border-radius-bottomleft:200px;
-webkit-border-bottom-left-radius:200px;
-moz-border-radius-topright:200px;
-webkit-border-top-right-radius:200px;
-moz-box-shadow:10px 13px 20px #000;
-webkit-box-shadow:10px 13px 20px #000;

Below is the result:

The problem with this effect is that it only displays the rounded corners as a background image. When I add content inside this div tag, the content overlays above the rounded corners instead of appear inside of the corners, as the following screenshot illustrates:

I haven’t found the solution to this problem yet, but I think I will find the solution eventually as I go through CSS 3 tutorials one by one. To learn more about the properties mentioned above and other CSS 3 properties, just google “CSS 3 tutorials“.

There are no posts related to CSS 3 Rounded Corner Effect and its Problem.

  1. James Lafferty says:
    06/12/2010 at 4:09 PM

    I like William’s solution. You could also use padding. This adjustment produces a pretty pleasing result for me:

    width:550px;
    /*height:500px;*/
    background-color:#8a2bcd;
    -moz-border-radius-topleft:200px;
    -webkit-border-top-left-radius:200px;
    -moz-border-radius-bottomleft:200px;
    -webkit-border-bottom-left-radius:200px;
    -moz-border-radius-topright:200px;
    -webkit-border-top-right-radius:200px;
    -moz-box-shadow:10px 13px 20px #000;
    -webkit-box-shadow:10px 13px 20px #000;

    padding:50px 80px 50px 150px;
    width:320px;

    Reply
  2. William Chambers says:
    04/18/2010 at 5:39 PM

    Use a div inside as a wrapper. Simple as that.

    Reply