3 Replies Latest reply on Feb 4, 2009 2:23 PM by Sound Garden

    Rounded Corners with CSS

    Sound Garden Level 1
      I'm working on a layout that requires the use of rounded corner with a transparent background. The main body of the area used within the rounded corners with just #fff.

      Could someone point me to the best way of doing this?
      I have search the net and found many different ways but wanted to get your feedback as to witch one works the best.
        • 1. Rounded Corners with CSS
          Sound Garden Level 1
          Here is what I have made that works fine in IE7-8 and FF3 but goes all wrong in IE6<

          .pagewrap {
          width:960px;
          }

          .pagecenter {
          background-color:#fff;
          padding-left:10px;
          padding-right:10px;
          }

          .topleft {
          background-image:url(../images/css/topleft.gif);
          background-repeat:no-repeat;
          height:15px;
          width:15px;
          margin:0px;
          }

          .topright {
          background-image:url(../images/css/topright.gif);
          background-repeat:no-repeat;
          height:15px;
          width:945px;
          margin-top:-15px;
          margin-left:15px;
          }

          .bottomleft {
          background-image:url(../images/css/bottomleft.gif);
          background-repeat:no-repeat;
          height:15px;
          width:15px;
          margin:0px;
          }

          .bottomright {
          background-image:url(../images/css/bottomright.gif);
          background-repeat:no-repeat;
          height:15px;
          width:945px;
          margin-top:-15px;
          margin-left:15px;
          }

          <div class="pagewrap">
          <div class="topleft"></div>
          <div class="topright"></div>
          <div class="pagecenter">
          Hello World
          </div>
          <div class="bottomleft"></div>
          <div class="bottomright"></div>
          </div>

          I've used a lot of div's to achieve this result and it's not very browser happy. Anyone else got a better way of doing it?
          Live demo: http://www.creekytowers.com/creeky/
          • 2. Re: Rounded Corners with CSS
            jdonnovan Level 1
            The above example link seems to no longer work, is this still the best method for obtaining a rounded corner effect?
            • 3. Re: Rounded Corners with CSS
              Sound Garden Level 1
              The best option I found for doing rounded corners and using transparent backgrounds is this one:
              http://www.curvycorners.net/
              They also do a nice little plug-in for DW, the only down side is you need to use a little js on the page with this.