SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member dikspence's Avatar
    Join Date
    Jun 2003
    Location
    Edmonton, Alberta, Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Corners with Borders.

    I am working on a site for my own business. I want my box elements to have rounded corners however I also want a border going around them. So far i have been able to come up with this http://www.runningman.ca. This worked well until I started testing with browsers other than IE6/WinXP. I have been searching the forums and google and have found the following tutorials:

    Doug's Easy Corners
    Problem: This best way in my opinion but still not perfect.
    Bullet-Proof Rounded Corners
    Problem: Images in HTML...would like to avoid at all costs. Im trying to serarate content and layout as much as possible.
    A List Apart
    Problem: Very large images if box to be used for main content areas.

    If anyone knows of any other tutorials please post them here. Or if you know of a better way to do this feel free to add you two cents.
    Running Man Design - "It pays to run with us."

  2. #2
    Mlle. Ledoyen silver trophy seanf's Avatar
    Join Date
    Jan 2001
    Location
    UK
    Posts
    7,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Harry Potter

    -- You lived inside my world so softly
    -- Protected only by the kindness of your nature

  3. #3
    SitePoint Member dikspence's Avatar
    Join Date
    Jun 2003
    Location
    Edmonton, Alberta, Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. This is the best I have been able to come up with so far. It is based off of Doug's Easy Corners.

    The (X)HTML.
    Code:
    <div class="box">
    <div class="top"><div class="tl"><div class="tr"></div></div></div>
    <div class="contentwrap"><div class="content">
    
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem 
    
    vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
    
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
    
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem 
    
    vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
    
    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    
    </div><!-- /content -->
    </div><!-- /contentwrap -->
    <div class="bot"><div class="bl"><div class="br"></div></div></div>
    </div><!-- /box -->
    The CSS

    Code:
     /* Background Images */
    .box  { background: #eeeee1; }
    
    .top  { background: url(images/rc/tbg.gif) repeat-x; }
    .tl  { background: url(images/rc/tl.gif) no-repeat top left; }
    .tr  { background: url(images/rc/tr.gif) no-repeat top right; }
    .bot  { background: url(images/rc/bbg.gif) repeat-x; }
    .bl  { background: url(images/rc/bl.gif) no-repeat top left; }
    .br  { background: url(images/rc/br.gif) no-repeat top right; }
    .contentwrap  { background: url(images/rc/lbg.gif) repeat-y; }
    .content  { background: url(images/rc/rbg.gif) repeat-y right; }
     
     /* Height and Width */
    .tr, .top, .br, .bot {
     height: 20px;  /* height of your corner images */
     width: 100%;
    }
    
    .content  {
     padding: 0 1em 0 1em;
     margin: 0;
    }
    
    .box {
     width: 50%;  /* the box width desired */
     margin: 1em auto;
    }
    
    p  {
     padding: 0;
     margin: 0px 10px; 10px; 10px;
    }
    
    body {
     background-color: #e6e6d9;
    }
    Working example.
    http://www.runningman.ca/examples/rc/index.html

    Please feel free to comment on this approach. Any suggestions are greatly appreciated. Also if you know of any other ways to create CSS rounded corners with borders please post them here.
    Running Man Design - "It pays to run with us."

  4. #4
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dikspence
    I am working on a site for my own business. I want my box elements to have rounded corners however I also want a border going around them. So far i have been able to come up with this http://www.runningman.ca. This worked well until I started testing with browsers other than IE6/WinXP. I have been searching the forums and google and have found the following tutorials:

    Doug's Easy Corners
    Problem: This best way in my opinion but still not perfect.
    Bullet-Proof Rounded Corners
    Problem: Images in HTML...would like to avoid at all costs. Im trying to serarate content and layout as much as possible.
    A List Apart
    Problem: Very large images if box to be used for main content areas.

    If anyone knows of any other tutorials please post them here. Or if you know of a better way to do this feel free to add you two cents.
    Hi

    Try my demo page:

    http://207.44.137.103/threeDbox.html





    Trevor
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •