Squircles

Squircle is an interesting curve shape, that sits between circle and rectangle.

What is a squircle ?

A squircle is a geometric shape that is in between the shape of a square and a circle that's why the name is squircle (square + circle).

Where did i see squircles for the first time?

If you have ever used any samsung's mobile then you would have noticed their one ui uses squircles to show icons. These icons are not perfectly circular or square but they are in between the two shapes which is called squircle.

Squircles vs Rounded Squares

A rounded square just has rounded corners, on the other hand a squircle has rounded edges

Here you can see the difference between a squircle, circle and a square. The squircle is not actually perfectly rounded at the corners like a rounded square of rectangle.

It’s a squircle and not a rounded rectangle!

How to create a squircle?

We can create a squircle using the corner-shape property in CSS. This property allows us to specify the shape of the corners of an element. To create a squircle, we can set the corner-shape property to squircle. However, since not all browsers may support this property, we can use a fallback method by setting the border-radius to 50% to create a circular shape.

  .squircle {
    corner-shape: squircle;
    border-radius: 50%;
  }

Why use squircles?

Squircles are a great way to add a modern and sleek look to your designs. They can be used in various applications such as icons, buttons, and even in typography. Squircles can also help to create a more cohesive and visually appealing design by providing a consistent shape that is not too harsh like a square or too soft like a circle.

Where have i used squircles?

Well i have used squircles in this portfolio itself. If you go and have a look at the contact page you will see that the icons are in the shape of squircles. I have used the same shape for all the icons to maintain consistency and to give a modern look to the design.