SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border radius cutting/overlapping image in Safari

    I have looked through a few other questions and answers but still can't get this working in Safari (v 5.1.7).

    Here is my code - jsfiddle

    Code:
    .services   {
        width: 218px;
        float: left;
        margin-right: 29px;
    }
    .services img   {
        border: solid 8px #ccc;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .services a img:hover   {
        border: solid 8px #333;
        -o-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -webkit-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }
    The image is square 218px x 218px, so I'm guessin that has something to do with it, but I wanted it like that so it would look decent enough in older browsers that don't support border radius.

    Here is what it looks like in Safari - border-cutting.jpg

    It's probably something simple, but I'm still stuck on this.

    Thanks.
    Al.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hm, tricky. It works if you put the border on the <a> instead:

    Code:
    .services   {
        width: 218px;
        float: left;
        margin-right: 29px;
    }
    
    .services img   {
        vertical-align: top;
    }
    
    .services img, .services a   {
        border-radius: 50%;
    }
    
    .services a {
    	border: 8px solid #ccc;
    	display: inline-block;
    }
    	
    .services a:hover   {
    	border: 8px solid #333;
        -o-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -webkit-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
    }
    You can just use border-radius now, without the vendor prefixes, as all browsers that are going to support it now.

  3. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that ralph. I have edited my code, but am on a PC running XP and Safari v 3.1 (which shows up as square), so won't be able to check myself til I go home (another 4 hours).

    Thanks again ralph!

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    It's a known webkit bug when you use border-radius on an image. The only fix I've seen available to address it is this:

    Code:
    img { 
    -webkit-box-shadow: 0px 0px 0px 1px #000000; /* fix for border-radius on img not clipping corners in chrome/safari */ 
    }
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Force. I used ralph's method and it works great.

    Thanks for the replies guys.


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
  •