Radio de borde de CSS de viento de cola

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *