Ethio 24/7 - Entertainment Videos, Music, News, Drama, Television Shows, Blog, Discussions

If you’ve searched for a tutorial on creating a rounded corner image for your Joomla modules positions or for any kind of website, you’ve probably stumbled upon my tutorial on how to create a rounded image using Photoshop. After a while of using, rounded corner images, I got to the point where I no longer wanted to create images because of page size. So, I started looking for other ways for making my website look cool. Little did I know, there is a way to create rounded corners using css all along. For those of you that are expecting some new way of creating a box with rounded corners using css, don’t be disappointed, this is a tutorial for users that somehow don’t know that there is a way to create rounded corners using just css (Like Me  J).  I have used rounded corners on two websites that I created using Joomla. One of them had a JA Purity Template (T3 framework) and the other one was a YouGrid Template using YJSG Framework. Using Firebug I was able to find which divs belong to which part of the website and change the css code accordingly.
So here is how you make rounded corners. Basically, when the edge (corner) of a box is not rounded, it has radius of 0. If the radius is not 0, the edge of the box will be rounded depending on the value of the radius specified. So to make the box rounded, you add a radius to all 4 parts of the box. The 4 parts meaning, Top Right, Top Left, Bottom Right and Bottom Left. So here is how the code works.

Border-top-left-radius: 10px;

Border-top-right-radius: 10px;

Border-bottom-left-radius: 10px;

Border-bottom-right-radius: 10px;

The 10px is for example purpose; just put your value there.