CSS Basics. How to Apply Rounded Corners On Images #2

<div class="post-body"><div id="adsmiddle13866518637046698909"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="blogger tricks, css tricks, border radius" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" style="border-radius: 800px 800px 800px 800px; border: 2px solid rgb(186, 218, 85); margin-top: 0px; padding: 0px;" title="how to round images using css in Blogger" width="200" /></a><a href="/2015/06/css-basics-how-to-apply-rounded-corners_73.html" style="color: blue;">In the previous post</a> I 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.<br /><br />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.<br /><br />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.<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>Marking up HTML</b></span></span><br /><br />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 the <b>img</b> tag, which basically, looks like this:<br /><blockquote class="tr_bq"><img src="<span style="color: blue;">image_URL</span>"/></blockquote><i>Screenshot</i>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmgDm6VHLwXw8YLKavetyXjepbTx8OBu4nNlp_wmHXs2Pi4zWQr803tjnU15fKfKhTM6lhPpqB9bC0nuJeTV-E-mDWpGBSYhdAhTGy8koGONmXPRJ0e0UDS9shhzK46-R-z-zzt8ub7pk/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmgDm6VHLwXw8YLKavetyXjepbTx8OBu4nNlp_wmHXs2Pi4zWQr803tjnU15fKfKhTM6lhPpqB9bC0nuJeTV-E-mDWpGBSYhdAhTGy8koGONmXPRJ0e0UDS9shhzK46-R-z-zzt8ub7pk/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius.png" width="320" /></a></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWbuQDWlkjglXCJIBQyaV9RtmRBSbQk0EklnYaDMBJiF2QqnBIRgQhdZ6cysG7bdTowNv8stmGF23YMo_zvO7NgMANS-Jm_elA6oCCAEP710zxkrARr35pZ7P2-3bpW-993Df61I-ncR6/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWbuQDWlkjglXCJIBQyaV9RtmRBSbQk0EklnYaDMBJiF2QqnBIRgQhdZ6cysG7bdTowNv8stmGF23YMo_zvO7NgMANS-Jm_elA6oCCAEP710zxkrARr35pZ7P2-3bpW-993Df61I-ncR6/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" width="150" /></a></div>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.<br /><br />Usually, it might also contain an <b>alt </b>text, 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.<br /><br />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 the <b>img</b> tag or in a parent box. The name that I have chosen for the image selector is <span style="color: #990000;">roundedcorners</span>, however, you can add any name you want: <br /><blockquote class="tr_bq"><img class="<span style="color: #990000;">roundedcorners</span>" src="<span style="color: blue;">image_URL</span>"/></blockquote><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmfrXgrCYJhqIh5WPP0TjjpO1pP2BRBqphffRYG1pq5UB89BLdFZQtPo6j3_T9e2ZmlM8zLiyAI0_InixQzY4MnHRfUpwwk4BaHOV4_JNC2sdeDJHnQYOrmy-wxv_EtaQRYAR_MwMPh0l/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmfrXgrCYJhqIh5WPP0TjjpO1pP2BRBqphffRYG1pq5UB89BLdFZQtPo6j3_T9e2ZmlM8zLiyAI0_InixQzY4MnHRfUpwwk4BaHOV4_JNC2sdeDJHnQYOrmy-wxv_EtaQRYAR_MwMPh0l/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius-1.png" width="320" /></a></div><br /><blockquote class="tr_bq"><div class="<span style="color: #990000;">roundedcorners</span>"><br /><img src="<span style="color: blue;">image_URL</span>"/><br /></div></blockquote><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>Applying style to all homogeneous elements</b></span></span><br /><br />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.<br /><br />To change the shape of the all the pictures on our blog, this is what we should add to our CSS:<br /><blockquote class="tr_bq"><span style="color: #cc0000;">img</span> {<br />border: 2px solid #BADA55;<br />margin: 0;<br />padding: 0;<br />border-radius: 1000px;<br />-moz-border-radius: 1000px;<br />}</blockquote>And how this translates to your browser?<br /><br />Search for images by name tag (<span style="color: #cc0000;">img</span>) and apply the following style:<br /><ul><li>a solid green border of 2 pixels</li><li>set the margins (space outside the border) and padding (space inside the border) to zero</li><li>apply the rounded corner look to all the four corners</li></ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" style="border-radius: 100% 100% 100% 100%; border: 2px solid rgb(186, 218, 85); margin-top: 0px; padding: 0px;" width="150" /></a>Now 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.<br /><br />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 <a href="http://www.w3.org/TR/css3-background/#the-border-radius">W3C</a> is the authority in this.<br /><br />For instance, the <b>border-radius</b> property 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.<br /><br />It is important to mention that when the value of the border exceeds the dimensions of the container, this border will create a circle. <br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>How to apply the same style<span style="font-size: large;"> on</span> <span style="font-size: large;">t</span>he elements of <span style="font-size: large;">t</span>he <span style="font-size: large;">s</span>ame container</b></span></span><br /><br />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 (<span style="color: #cc0000;">img</span>) and not a selector and, for this reason, the style will affect all our images.</div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle23866518637046698909">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 the <span style="color: #990000;">roundedcorners</span> class. This way, only the images within the container with that class will be affected by the rule that will make them round.<br /><blockquote class="tr_bq"><div class="<span style="color: #990000;">roundedcorners</span>"><img src="<span style="color: blue;">image_URL</span>"/></div></blockquote>But the rule then should not affect the img tag directly, but the <span style="color: #990000;">roundedcorners</span> selector. In this case, you should write it like this:<br /><blockquote class="tr_bq">.roundedcorners img {<br />border: 2px solid #BADA55;<br />....<br />}</blockquote><i>This implies that this style applies only to images that are within the container with the roundedcorners class. </i><br /><br /><span style="font-size: large;"><b><span style="color: #3d85c6;">Final words</span></b></span><br /><br />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:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQmaO15GWROhm42mnJkwvv1jGkzzkaTQC_uPXptQsswrdNpLjaffcKfepJISbupoE6LlCy5jtxDI_gpiNAwMGBHN151qLRB8xVYkrMeVQJVt966LrMTs6JYwP3m2D1usR97BVITw1gXXJ/s1600/Snail_and_Chameleon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQmaO15GWROhm42mnJkwvv1jGkzzkaTQC_uPXptQsswrdNpLjaffcKfepJISbupoE6LlCy5jtxDI_gpiNAwMGBHN151qLRB8xVYkrMeVQJVt966LrMTs6JYwP3m2D1usR97BVITw1gXXJ/s1600/Snail_and_Chameleon.jpg" style="border-radius: 100px; border: 2px solid #BADA55; margin: 0; padding: 0;" width="320" /></a></div><br />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!<br /><br />If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;) </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle13866518637046698909"); var obj1=document.getElementById("adsmiddle23866518637046698909"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div><br /><br /><br /><br /><br /><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-JE2gK4-dcDs%2FUUjMcD2KmmI%2FAAAAAAAADH8%2FYEdAZ5zGFIM%2Fs1600%2Fleaf.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" --><!-- Blogger automated replacement: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" --><!-- Blogger automated replacement: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" --><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-QmnwxuDE88w%2FUUjP4kyusKI%2FAAAAAAAADII%2FXlGDFxhDD4s%2Fs1600%2Fhow-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" -->

Blog Design CSS Basics. How to Apply Rounded Corners On Images #2

In the previous post I 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 wi…

Read more »