Semantic-UI Image Bordered Variations

Last Updated : 28 Feb, 2022

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 Bordered Variations are used to add borders to edges of white or transparent content.

Semantic UI image bordered variation class:

bordered: This class is used to add borders on the edge of the image content.

Syntax:

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

Example 1: In this example, we will use Semantic-UI Image Bordered Variations to add borders on the edges of the image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Bordered Variations 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Bordered Variations</h3> 
  
        <img class="ui mini centered bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui tiny centered bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui small centered bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui medium centered bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui large centered bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <div style="padding-bottom: 400px;"></div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use Semantic-UI Image Bordered Variations with Circular Variations to add borders on the edges of the image.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Image Bordered Variations 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui center aligned container"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Image Bordered Variations</h3> 
  
        <img class="ui mini centered circular bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui tiny centered circular bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui small centered circular bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui medium centered circular bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <br> 
        <img class="ui large centered circular bordered image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"> 
        <div style="padding-bottom: 400px;"></div> 
    </div> 
</body> 
  
</html>