CSS Basics. How to Apply Rounded Corners On Images alphause

Po ... CSS Basics. How to Apply Rounded Corners On Images #2 5 comments In the previous postI have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply it on some pictures. What we will do in this tutorial is to upload an image (HTML) and then add some rules in the stylesheet that will transform the outer shape to look like a circle... or, at least, to appear round. This will depend on the proportions of that picture we will use. In fact, we can apply this effect to any picture, to a specific part of our blog or to all the pictures found in our blog. This depends on your tastes. Marking up HTML Obviously, the first thing we need to do in order to set a rounded border around an image is to get a picture and upload it to get the html structure. The code could be a little bit more complicated, but an image is built within theimgtag, which basically, looks like this: Screenshot: Adding this code inside the HTML of the post with the url of our image - instead of the text in blue - we will be able to display it like this image on the left. Usually, it might also contain analttext, and sometimes, may have some predetermined dimensions (with a specific width and/or height). When we upload an image using the Blogger post editor, the code will also have a link pointing to the original image. But if we want to modify this image using CSS, we need to add a class selector. We can add it in two ways: within theimgtag or in a parent box. The name that I have chosen for the image selector isroundedcorners, however, you can add any name you want:

Applying style to all homogeneous elements But that selector alone won't do anything special. It needs to be linked to a style rule telling what to do with it. The same if when we add just classes, if these are not defined within the CSS, the appearance of a picture (or a certain element) will not change. To change the shape of the all the pictures on our blog, this is what we should add to our CSS: img{ border: 2px solid #BADA55; margin: 0; padding: 0; border-radius: 1000px; -moz-border-radius: 1000px; }And how this translates to your browser? Search for images by name tag (img) and apply the following style: a solid green border of 2 pixels set the margins (space outside the border) and padding (space inside the border) to zero apply the rounded corner look to all the four cornersNow that we have this rule in our style sheet itself, we'll be able to see the picture as we want - take a look at the image on the right. To declare a property correctly, we need to know what it does and how to write it - details which could be found all over the internet, although W3Cis the authority in this. For instance, theborder-radiusproperty initially requires four (4) values reading from left to right, which represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you add a single value, it will make all the four corners to be equal with that value. It is important to mention that when the value of the border exceeds the dimensions of the container, this border will create a circle. How to apply the same styleonthe elements ofthesame container Sometimes, we don't want all the images on our blog to be round, but only the ones that we choose, otherwise adding the style above within the head tag will make all the pictures taking this shape. Before, we used an HTML tag (img) and not a selector and, for this reason, the style will affect all our images. To avoid this, we can do one of the things we saw at the beginning of this post and that was to place the image inside a div with theroundedcornersclass. This way, only the images within the container with that class will be affected by the rule that will make them round.

But the rule then should not affect the img tag directly, but theroundedcornersselector. In this case, you should write it like this: .roundedcorners img { border: 2px solid #BADA55; .... }This implies that this style applies only to images that are within the container with the roundedcorners class. Final words To end this tutorial on creating pictures with rounded borders, keep in mind that if these are not square, instead of becoming circular, they will look oval: To fix this we should add the width and height with the same measure (value in pixels) to force the image cropping and to make it appear perfectly circular. That was all! If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;) Like 1 Random Posts How To Add A Tabbed Navigation Widget to Blogger29/04/2013 - 14 Comments Color Code Generator28/02/2012 - 0 Comments Advanced Random posts widget for Blogger with image thumbnails and snippets07/02/2014 - 12 Comments Related Posts: How to Increase Thumbnail Resoluti... How to Use Cookies in Javascript Create a CSS3 Image Hover Effect wi... Before/After Photo Effect with jQue... Rounded Corners and Shadows for Ima... 5 comments: vikram 3/20/2013 Thanks for this post .but i want to make only post images rounded by default .I dont want to add css on every post instead can we do something in Blogger Edit Html ,so that all the images in post get circular automatically. Reply Replies Admin 3/20/2013 Copy the style from "Applying style to all homogeneous elements" and paste it above]]> Alen 3/24/2013 Your post is really interesting...The main point of this blogpost is that you have given the code which we need to implement. i bookmark your website for your future use...can u please share post related to ror development ? Reply optimasi seo blog 4/01/2013 segera di terapka master..terima kasih atas share infonya Reply Cj Escuadro 4/19/2013 Hi I was searching for tutorials on how to make the images on my recent post a "rounded" one and I bump in to your blog.I'm actually having problem with codes.bummer.can you do a tutorial on how to make the photos on recent posts rounded?Please? :( I hope you can help me.You can email me in cjescuadro@ gmail.com.Thank you so much! Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like