Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad border-radius de CSS. Esta clase se utiliza para establecer el radio del borde.
Clases de radio de borde:
- redondeado-ninguno
- redondeado-sm
- redondeado
- md redondeado
- redondeado-lg
- redondeado-xl
- redondeado-2xl
- redondeado-3xl
- redondeado-completo
- redondeado-t-ninguno
- redondeado-r-ninguno
- redondeado-b-ninguno
- redondeado-l-ninguno
- T-SM redondeada
- redondeado-r-sm
- b-sm-redondeada
- L-SM redondeada
- T redondeada
- redondeado-r
- redondeado-b
- redondeado-l
- redondeado-t-md
- redondeado-r-md
- redondeado-b-md
- redondeado-l-md
- redondeado-t-lg
- redondeado-r-lg
- redondeado-b-lg
- redondeado-l-lg
- redondeada-t-xl
- redondeado-r-xl
- redondeado-b-xl
- redondeado-l-xl
- redondeada-t-2xl
- redondeado-r-2xl
- redondeado-b-2xl
- redondeado-l-2xl
- redondeada-t-3xl
- redondeado-r-3xl
- redondeado-b-3xl
- redondeado-l-3xl
- redondeado-t-completo
- redondeado-r-completo
- redondeado-b-completo
- redondeado-l-completo
- redondeado-tl-ninguno
- redondeado-tr-ninguno
- redondeado-br-ninguno
- redondeado-bl-ninguno
- redondeado-tl-sm
- redondeado-tr-sm
- redondeado-br-sm
- redondeado-bl-sm
- redondeado-tl
- redondeado-tr
- redondeado-br
- redondeado-bl
- redondeado-tl-md
- redondeado-tr-md
- redondeado-br-md
- redondeado-bl-md
- redondeado-tl-lg
- redondeado-tr-lg
- redondeado-br-lg
- redondeado-bl-lg
- redondeado-tl-xl
- redondeado-tr-xl
- redondeado-br-xl
- redondeado-bl-xl
- redondeado-tl-2xl
- redondeado-tr-2xl
- redondeado-br-2xl
- redondeado-bl-2xl
- redondeado-tl-3xl
- redondeado-tr-3xl
- redondeado-br-3xl
- redondeado-bl-3xl
- redondeado-tl-completo
- redondeado-tr-completo
- redondeado-br-completo
- redondeado-bl-completo
Esquinas redondeadas: en esta sección, se cubren las clases que se han utilizado para crear esquinas redondeadas como rounded-sm, rounded-md, rounded-lg, etc., pero no las formas totalmente circulares o de píldora.
Sintaxis:
<element class="rounded-{Border-Radius}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Radius Class</b> <div class="mx-4 grid grid-cols-3 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="rounded-none bg-green-400 w-48 h-12"> rounded-none</div> <div class="rounded bg-green-400 w-48 h-12"> rounded</div> <div class="rounded-sm bg-green-400 w-48 h-12"> rounded-sm</div> <div class="rounded-md bg-green-400 w-48 h-12"> rounded-md</div> <div class="rounded-lg bg-green-400 w-48 h-12"> rounded-lg</div> <div class="rounded-xl bg-green-400 w-48 h-12"> rounded-xl</div> </div> </body> </html>
Producción:
Píldoras y círculos: en esta sección, se tratan las clases que se han utilizado para crear círculos completos y píldoras como clases redondeadas y completas.
Sintaxis:
<element class="rounded-full">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Radius Class</b> <div class="mx-24 grid grid-cols-3 gap-2 bg-green-200 p-2"> <div class="rounded-full bg-green-400 py-3 px-6"> rounded-full for Design Pill </div> <div class="rounded-full mx-32 bg-green-400 h-24 w-24 flex items-center justify-center"> rounded-full for Circle </div> </div> </body> </html>
Producción:
Redondeo de lados por separado: en esta sección, se cubren todas las clases que se han utilizado para crear un lado redondeado como rounded-t-lg, rounded-r-lg, rounded-b-lg, etc.
Sintaxis:
<element class="rounded-{t|r|b|l}{-size?}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Radius Class</b> <div class="mx-4 grid grid-cols-2 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="rounded-t-lg bg-green-400 w-full h-12"> rounded-t-lg</div> <div class="rounded-r-lg bg-green-400 w-full h-12"> rounded-r-lg</div> <div class="rounded-l-lg bg-green-400 w-full h-12"> rounded-l-lg</div> <div class="rounded-b-lg bg-green-400 w-full h-12"> rounded-b-lg</div> </div> </body> </html>
Producción:
Redondeo de esquinas por separado: en esta sección, se cubren todas las clases que se han utilizado para crear una esquina redondeada como rounded-tl-lg, rounded-tr-lg, rounded-br-lg, etc.
Sintaxis:
<element class="rounded-{tl|tr|br|bl}{-size?}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Border Radius Class</b> <div class="mx-4 grid grid-cols-2 gap-2 bg-green-200 p-2"> <!-- First sub div is not for roundig--> <div class="rounded-tl-lg bg-green-400 w-full h-12"> rounded-tl-lg</div> <div class="rounded-tr-lg bg-green-400 w-full h-12"> rounded-tr-lg</div> <div class="rounded-bl-lg bg-green-400 w-full h-12"> rounded-bl-lg</div> <div class="rounded-br-lg bg-green-400 w-full h-12"> rounded-br-lg</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA