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.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-round w3-blue">
        
        <p>This has class w3-round<p>
    </div>
    
     <div class="w3-round-medium w3-blue">
        
        <p>This has class w3-round-medium<p>
    </div>
     <div class="w3-round-small w3-blue">
        
        <p>This has class w3-round-small<p>
    </div>
     <div class="w3-round-large w3-blue">
        
        <p>This has class w3-round-large<p>
    </div>
     <div class="w3-round-xlarge w3-blue">
        
        <p>This has class w3-round-xlarge<p>
    </div>
     <div class="w3-round-xxlarge w3-blue">
        
        <p>This has class w3-round-xxlarge<p>
    </div>
     <div class="w3-round-jumbo w3-blue">
        
        <p>This has class w3-round-jumbo<p>
    </div>
    

</html>

Download the code Try the code

In the above example, you can see all the seven border round classes in action. Apart from panels, you can also add round images. To do so, w3-circle class is used.

W3CSS Round Images

Take a look at the following example to see how we can round images via w3-circle class.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


    
    <img class="w3-circle" src="http://images.freeimages.com/images/previews/de2/boats-on-the-lake-1380939.jpg" alt="Car" style="width:100%">

    <div class="w3-pink w3-circle w3-center">
    <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
    </div>

</body>

</html>

Download the code Try the code

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.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .