W3CSS Round

Square elements look more robust but rounded elements look more elegant and add to the aesthetics of a website. We often need to create rounded borders around the panels or containers, we also need to create rounded images and divs in our websites. W3CSS Round classes help us achieve all these tasks and we shall look at them in detail in this article.

There are seven classes that can be used to add rounded border around a container. They include w3-round, w3-round-medium, w3-round-small, w3-round-large, w3-round-xlarge, w3-round-xxlarge and w3-round-jumbo. Let’s look at them in action in our first example.

The above code has one image and a circular div. Let’s first talk about the image. We have simply added w3-circle class to its image tag. Similarly, for the div we included 5 paragraphs inside it and add w3-circle class to it as well

Now if you open the above page in browser, you might see that the image is not perfectly circle. This is because its width and height is not same. What w3-circle does is, it sets border-radius property of the div and image to 100%. Therefore a perfect circle is formed only if the width and height of the image or div is equal, otherwise an elliptical shape is achieved as is the case with the image and div in the above code.

This article explained W3CSS Round classes, in the upcoming article, we shall start our discussion on padding and margins in W3CSS, keep visiting this site.