SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Rounded Corners w/Border issue

    I am looking for advice on an issue I am seeing when using css3 rounded corners and with a border applied.

    So, for example, if you have a div with class applied such as:
    .nav {

    height:75px;
    width:500px;
    background-color: #3f6ea8;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border:5px solid #dedede;
    }


    this causes a weird issue on the outside of the rounded corners where you can see the background color just slightly peaking over the solid border color...almost like when you used to use transparent gifs when doing rounded corners before css3.

    Anyone know of a fix for this?

    Regards,
    2009site2009

  2. #2
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    Which browser is exhibiting the issue?

    Can you post a link to the page or post your HTML within in the [ code ] [ /code ] tags?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is happening on a mac in Safari 5.0.4 I will have to post in a link in a bit to show what I am referring to.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    it looks like it's an anti aliasing issue, nothing to worry about.

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved...
    -webkit-background-clip: padding-box;

    Thanks goes to Dan Rubin!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Yes that's the common solution but you might like to add the real property so that Opera (and others) can play also.
    Code:
    .nav {
        height:75px;
        width:500px;
        background-color: #3f6ea8;
        border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        border:5px solid #dedede;
        -webkit-background-clip: padding-box;
        background-clip: padding-box
    }


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
  •