Border Radius in TailwindCSS – [Top + Bottom + Left + Right]

Border-radius is more common than ever in modern web design. You need border-radius in almost everything. You can style different buttons, cards, images, and many other elements using border-radius in TailwindCSS.

Using border-radius in TailwindCSS

By default, TailwindCSS gives you different classes to round the corners of an element. All these classes start with rounded- and has different values to apply border-raidus. Here is an example of using rounded- classes to apply border-radius in TailwindCSS.

You can check the working example on tailwindcss playground. And here is the screenshot of the output.

border-radius in TailwindCSS

Using Separate Border-Radius in TailwindCSS

You can also use the separate border-radius to style the different corners of an element. This will not make rounded corners on every side but to only you want to apply. Here is an example of using separate border-radius for top-right , top-left , bottom-left and bottom-right.

By using the above code, you can make separate rounded corners of your choice. This is very useful when you are working with different shapes. Here is the online example and the output is attached below.

separate border-radius in tailwindcss


By default, you can use the provided classes to add border-radius in TailwindCSS. These classes are rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full etc. But, if you want to have separate border-radius in TailwindCSS, you can use classes like rounded-tr-md, rounded-tl-md etc.


Latest articles

Related articles