Spectre Shapes

Last Updated : 07 Feb, 2022

Spectre Shapes are used to create different shapes for HTML elements. This is one of the most useful utilities in Spectre. To change any element’s shape, you just need to include this class.

Spectre Shapes class:

s-circle: This class is used to make the element circle-shaped.
s-rounded: This class is used to make the element rounded

Syntax:

<div class="s-rounded">
   ....
</div>

Example: Below example illustrate the Spectre Shapes using both the above classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Shape Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        div { 
            height: 100px; 
            width: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Shape Class</strong> 
        <br> 
        <div class="bg-success s-circle">Circular</div> 
        <div class="bg-success s-rounded">Rounded</div> 
    </center> 
</body> 
</html> 