Open In App

Semantic-UI Image Rounded Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

There are different styles of putting images on our website using semantic-ui that make our website look more awesome. Semantic-UI Image Rounded Variation is used to add rounded corners to the images.

Semantic UI image size variation class:

  • rounded: It is used to add a rounded corner to the images.

Syntax:

<img class="ui medium rounded image" src="gfg.png">

Example 1: In this example, we will describe the Semantic-UI Image Rounded Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Rounded Variations
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Rounded Variations</h3>
  
        <img class="ui centered rounded image" src=
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will describe the Semantic-UI Image Rounded Variation with different sizes variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Image Rounded Variations
    </title>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui center aligned container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Image Rounded Variations</h3>
  
        <img class="ui mini centered rounded image" src=
        <br>
        <img class="ui tiny centered rounded image" src=
        <br>
        <img class="ui small centered rounded image" src=
        <br>
        <img class="ui medium centered rounded image" src=
        <br>
        <img class="ui large centered rounded image" src=
        <div style="padding-bottom: 400px;"></div>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/image.html#rounded



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads