Bulma Rounded images

Last Updated : 09 Feb, 2022

Bulma is a free and open-source CSS framework which ships with premade components and elements. It makes the development of websites very fast as you do not have to style everything from scratch. In this article, we will be using Bulma is-rounded class to make an image round.

Bulma Rounded Images Class:

is-rounded: This class is used to make the images rounded.

Syntax:

<figure class="image is-64x64">
    <img class="is-rounded" src="./link-to-image">
</figure>

Below example illustrate the Bulma Rounded images:

Example: The below example illustrates the use of the Bulma is-rounded class to make an image round.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Bulma Rounded Images</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
 
    <style>
        figure {
            margin: 20px auto;
        }
    </style>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
     
    <b>Bulma Rounded Images</b>
     
    <div class="container">
        <figure class="image is-64x64">
            <img class="is-rounded"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
                alt="Gfg logo">
        </figure>
    </div>
</body>
 
</html>