How to: Rounded Corners Border around Joomla Content
The world of CSS is a world of boxes. Everything on a page is a box, within a box, within a box and so on. Unfortunately this leads to ghastly corners with sharp edges.
However, the power of CSS3 offers us a glimpse of hope, in the form of beautiful rounded corners. Hopefully with this tutorial; we will be able to childproof those pointy edges and beautify the world-wide-web in the process.
So without delay, lets create a div with some nice rounded corners with a radius of 5 pixels
The code will create a div that looks like this:
Lets take a look at the code a little more closely, in particular the “-moz-border-radius” and “-webkit-border-radius” properties. The specifies the number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner – in Mozilla-Firefox based browsers (see picture below). The latter does the same but for safari based browsers. Other browsers such as Google Chrome, will also recognize and interpret these lines correctly.
This rule doesn’t just apply to rounding background colors but you are also able add a border to the element, the border would become rounded as well. For example, a block quote could be styled like so:
Resulting in a stylish block quote without the use of any images.
Lastly, we are also not limited to either all rounded corners or none. Using this property, you can specify exactly which corners you want rounded in your CSS. Once again, the prior line below is for Mozilla based browsers and the latter is for safari based browsers.
Using this ability, we can create some fancy alert messages.
Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:
