Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Graham Davidson
Courses Plus Student 14,966 PointsRounded Corner Issues on iPad/iPhone
Hi
I am making the move to trying to make as much as I do responsive which comes with all its own little joys (as I am sure you are all aware).
Anyway this page is just an internal reference and not for customers' eyes - but I still want it to look right.
When I am checking it on my iPhone 3 (dark ages phone) the border radius looks a bit strange - the corner appears almost cut off. Is there anyone that might be able to shed some light on this for me please
G
4 Answers
Codie Mullins
2,814 PointsGraham,
I tested it out changing it from % to pixels and I see the same issue you are reporting on your iPhone 3 on both an iPhone 5 and Safari for Mac. I did some research and the recommendation for the border-radius spec is to clip an image if it flows out of the border-radius but it isn't part of the official spec so WebKit based browsers haven't implemented it to do so. It IS part of the official spec that all backgrounds including a background-image are clipped by a border-radius.
So the workaround is to make each image the background of a div that has the height and width of the image itself. I realize this isn't ideal. You can view a sample of this on a CodePen I created. I tested this on Safari for Mac and iPhone, it also works in Chrome on both as well. See below for the sample CSS and HTML:
HTML
<div class="img-border-radius">
</div>
CSS
.img-border-radius {
border: solid 5px #B9CC00;
background-image: url(http://www.firstlookweb.co.uk/img/brownHorse.jpg);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
width: 440px;
height: 520px;
}
Additionally here is a link. detailing how this can be implemented with CSS and jQuery, I have not tested this implementation out but from reading it, I would suspect it would work for you.
Hope this information is helpful, good luck!
Codie Mullins
2,814 PointsCan you re-post the link? It didn't seem to come across in the post.
Graham Davidson
Courses Plus Student 14,966 PointsOooops my bad Here it is
Graham Davidson
Courses Plus Student 14,966 PointsAh I have the answer (supplied buy someone on FB) it is because it uses a % for the border width (apparently)
G
Codie Mullins
2,814 PointsCodie Mullins
2,814 PointsI was mistaken and it is possible in Safari to apply the border-radius on the image. The border-radius should be on the parent div of the image and it needs to have
overflow: hidden. I have updated my Codepen with sample code on how to use it.Graham Davidson
Courses Plus Student 14,966 PointsGraham Davidson
Courses Plus Student 14,966 PointsGreat answer on this Codie - thank you ever so much I have just made one slight tweak
border: solid 5px #B9CC00; overflow:hidden; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; display:inline-block;
The images need to be responsive so replaced width and height - with my new favourite inline-block
And happy days
G