<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>

<button class=" border-none rounded-none....">Button</button>

<button type="button" class="rounded-full....">Click me</button>

<div
	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
	<div class="rounded-t-md bg-indigo-500 p-4">Top borders Only</div>
</div>

<div
	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
	<div class="rounded-b-lg bg-indigo-500 p-4">bottom borders Only</div>
</div>

<div
	class="flex space-x-4 justify-center items-center p-5 text-white font-bold bg-indigo-100 rounded-t-md"
>
	<div class="rounded-es-md bg-indigo-500 p-4">bottm End Start Border Only</div>
	<div class="rounded-tr-md bg-indigo-500 p-4">Top right end border</div>
</div>

<div class="bg-indigo-50 flex-1 justify-center items-center p-4 rounded-t">
	<div
		class=" bg-indigo-500 max-w-md text-center text-white p-3 rounded-sm md:rounded-md lg:rounded-2xl"
	>
		Responsive border radius
	</div>
</div>

<div class="bg-indigo-50 p-4 space-y-5 rounded-t ">
	<div class="bg-indigo-500 p-3 text-white text-center font-bold rounded-[6px]">
		6px border radius
	</div>
	<div
		class=" bg-indigo-500 p-3 text-white text-center font-bold rounded-tr-[1.5rem]"
	>
		Top-right 1.5rem
	</div>
</div>

module.exports = {
	theme: {
		extend: {
			borderRadius: {
				card: "0.75rem",
				cta: "1.25rem",
			},
		},
	},
};

<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
	<div class="flex-col bg-white p-4 rounded-card max-w-md">
		<h1 class="font-bold text-2xl mb-2">Card</h1>
		<p class="text-gray-500">This cards a Custom card radius</p>
	</div>
</div>

<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
	<button
		class="bg-indigo-500 p-3 text-white font-bold rounded-md hover:rounded-lg focus:rounded-full transition-all"
	>
		Hover me
	</button>
</div>

<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
		<img
			class="object-cover rounded"
			src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D"
		/>
		<div class="flex-col">
			<h1 class="font-bold my-3 text-2xl">Product Card</h1>
			<p class="text-gray-600 my-2">
				This describes the different aspect of the product listed to allow you
				make better decison on whether to buy it or not.
			</p>
			<span class="flex my-2 text-gray-800 font-medium">$23</span>
			<button
				class="bg-indigo-500 w-full text-center font-bold text-white rounded-2xl py-2"
			>
				Buy
			</button>
		</div>
	</div>
</div>

<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
		<img
			src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D"
			class="w-24 h-24 rounded-full"
		/>
	</div>
</div>

<div class="bg-indigo-50 p-4 flex justify-center items-center rounded-t ">
	<div class="rounded-lg shadow-md p-3 bg-white max-w-md pb-5">
		<div class="rounded-t-lg bg-indigo-400 p-4 text-white font-bold">
			Modal Title
		</div>
	</div>
</div>