How to Create Semi Circles in Tailwind CSS

Last updated on May 13, 2022 Pennywise Loading... Post a comment

With Tailwind CSS, you can create a semicircle by creating a rectangle twice as long as it’s wide, then rounding the two corners using the following utility classes: rounded-tf-full, rounded-tr -full, rounded-br-full, rounded-bl-full.

Example

Screenshot:

The code:

<body class="p-10 flex space-x-4">
    <div class="w-48 h-24 rounded-bl-full rounded-br-full bg-amber-500"></div>
    <div class="w-48 h-24 rounded-tl-full rounded-tr-full bg-rose-500"></div>
    <div class="w-24 h-48 rounded-tl-full rounded-bl-full bg-blue-500"></div>
    <div class="w-24 h-48 rounded-tr-full rounded-br-full bg-cyan-500"></div>
</body>

That’s it. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like