PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

How to create CSS circles

How to create CSS circles

Thanks to CSS3, creating circles couldn't be easier. Let's say that you have a block that is 100 pixels tall and 100 pixels wide. Well, if you gave each of the corners a border radius of 50px it will come out to be a perfect circle. Using the following CSS:

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    background:#3555AA;
}

And then adding the following Div to your html:

<div class="circle"></div>

Will give you a perfect circle:

You can apply this effect to divs, images, and any other HTML element. Checkout this awesome reference on the multiple shapes of CSS: 

https://css-tricks.com/examples/ShapesOfCSS/

Comments (0)

loading comments