Raio da borda no CSS do Tailwind

Raio da borda do vento de cauda

O raio da borda refere-se ao arredondamento dos cantos de um elemento.

É um aspecto significativo do design de sites, pois pode fazer com que o site pareça moderno e elegante.

Tailwind CSS fornece uma ampla variedade de classes de raio de borda, o que torna mais fácil para os desenvolvedores adicionar cantos arredondados aos elementos de seu site.

Sintaxe

<element class="rounded-{Border-Radius}">....</element>

Usando esta classe, você pode definir o raio da borda, que é a curvatura das bordas.

Classes de raio de borda de vento de cauda

1. rounded-none : Esta classe redefine o raio da borda para 0, removendo efetivamente todos os cantos arredondados.
2. rounded-sm : Esta classe é usada para aplicar um raio de borda de 0,125 rem (ou 2px) a todos os quatro cantos de um elemento.
3. arredondado : Um raio de borda de 0,25 rem (ou 4px) é aplicado a todas as quatro bordas do elemento usando esta classe.
4. rounded-md : Um elemento com esta classe tem um raio de borda de 0,375 rem (ou 6px) em torno de todos os quatro cantos.
5. rounded-lg : Usando esta classe, todos os quatro cantos de um elemento são arredondados em 0,5 rem (ou 8px).
6. rounded-xl : Nesta classe, um raio de borda de 0,75 rem (ou 12px) é aplicado a todos os quatro cantos de um elemento.
7. rounded-2xl : Um raio de borda de 1rem (ou 16px) é aplicado a todas as quatro bordas do elemento usando esta classe.
8. rounded-3xl : Aplica um raio de borda de 1,5 rem (ou 24px) a todos os quatro cantos do elemento.
9. arredondado-completo : Ao aplicar um raio de borda de 50%, cria uma forma circular.
10. rounded-t-none : Os cantos superior esquerdo e superior direito do elemento são removidos, enquanto os cantos inferior esquerdo e inferior direito são preservados.
11. rounded-r-none : Os cantos superior direito e inferior direito do elemento são removidos, enquanto os cantos inferior esquerdo e superior esquerdo são preservados.
12. rounded-b-none : Os cantos inferior esquerdo e inferior direito do elemento são removidos, enquanto os cantos superior esquerdo e superior direito são preservados.
13. rounded-l-none : Os cantos superior esquerdo e inferior esquerdo do elemento são removidos, enquanto os cantos inferior direito e superior direito são preservados.
14. rounded-t-sm : Esta classe é usada para aplicar um raio de borda de 0,125 rem (ou 2px) a todos os quatro cantos de um elemento.
15. rounded-r-sm : Usando esta classe, os cantos inferior direito e superior direito dos elementos são arredondados em 0,125 rem (ou 2px).
16. rounded-b-sm : Como resultado desta classe, um raio de borda de 0,125 rem (ou 2px) é aplicado aos cantos inferior esquerdo e inferior direito dos elementos.
17. rounded-l-sm : Nesta classe, um raio de borda de 0,125 rem (ou 2px) é aplicado aos cantos inferior esquerdo e superior esquerdo de um elemento.
18. rounded-t : Um elemento com esta classe tem seus cantos superior esquerdo e superior direito arredondados em 0,25 rem (ou 4px), mas seus cantos inferior esquerdo e inferior direito permanecem sem arredondamento.
19. rounded-r : Um elemento com esta classe tem seus cantos inferior direito e superior direito arredondados em 0,25 rem (ou 4px), mas seus cantos superior esquerdo e inferior esquerdo permanecem sem arredondamento.
20. rounded-b : Um elemento com esta classe tem seus cantos inferior esquerdo e inferior direito arredondados em 0,25 rem (ou 4px), mas seus cantos superior esquerdo e superior direito permanecem sem arredondamento.
21. rounded-l : Um elemento com esta classe tem seus cantos superior esquerdo e inferior esquerdo arredondados em 0,25 rem (ou 4px), mas seus cantos superior direito e inferior direito permanecem sem arredondamento.
22. rounded-t-md : Esta classe é usada para aplicar um raio de borda de 0,375 rem (ou 6px) apenas nos cantos superior esquerdo e superior direito de um elemento.
23. rounded-r-md : Esta classe é usada para aplicar um raio de borda de 0,375 rem (ou 6px) apenas nos cantos superior direito e inferior direito de um elemento.
24. rounded-b-md : Esta classe é usada para aplicar um raio de borda de 0,375 rem (ou 6px) apenas nos cantos inferior esquerdo e inferior direito de um elemento.
25. rounded-l-md : Esta classe é usada para aplicar um raio de borda de 0,375 rem (ou 6px) apenas nos cantos superior esquerdo e inferior esquerdo de um elemento.
26. rounded-t-lg : Nesse caso, os cantos superior direito e superior esquerdo do elemento têm um raio de borda de 0,5 rem (ou 8px).
27. rounded-r-lg : Nesse caso, os cantos superior direito e inferior direito do elemento têm um raio de borda de 0,5 rem (ou 8px).
28. rounded-b-lg : Nesse caso, os cantos inferior direito e inferior esquerdo do elemento têm um raio de borda de 0,5 rem (ou 8px).
29. rounded-l-lg : Nesse caso, os cantos inferior direito e superior esquerdo do elemento têm um raio de borda de 0,5 rem (ou 8px).
30. rounded-t-xl : Há um raio de borda de 0,75 rem (ou 12px) aplicado aos cantos superior direito e superior esquerdo.
31. rounded-r-xl : Há um raio de borda de 0,75 rem (ou 12px) aplicado aos cantos superior direito e inferior direito.
32. rounded-b-xl : Há um raio de borda de 0,75 rem (ou 12px) aplicado aos cantos inferior direito e inferior direito.
33. rounded-l-xl : Há um raio de borda de 0,75 rem (ou 12px) aplicado aos cantos superior esquerdo e esquerdo direito.
34. rounded-t-2xl : Esta classe aplica um raio de borda de 1rem (ou 16px) aos cantos superior esquerdo e superior direito do elemento.
35. rounded-r-2xl : Esta classe aplica um raio de borda de 1rem (ou 16px) aos cantos inferior esquerdo e superior direito do elemento.
36. rounded-b-2xl : Esta classe aplica um raio de borda de 1rem (ou 16px) aos cantos inferior esquerdo e inferior direito do elemento.
37. rounded-l-2xl : Esta classe aplica um raio de borda de 1rem (ou 16px) aos cantos superior esquerdo e inferior esquerdo do elemento.
38. rounded-t-3xl : Nesse caso, os cantos superior direito e superior esquerdo do elemento têm um raio de borda de 1,5 rem (ou 24px).
39. rounded-r-3xl : Nesse caso, os cantos superior direito e inferior direito do elemento têm um raio de borda de 1,5 rem (ou 24px).
40. rounded-b-3xl : Nesse caso, os cantos inferior direito e inferior esquerdo do elemento têm um raio de borda de 1,5 rem (ou 24px).
41. rounded-l-3xl : Nesse caso, os cantos inferior esquerdo e superior esquerdo do elemento têm um raio de borda de 1,5 rem (ou 24px).
42. rounded-t-full : Um elemento com esta classe tem um raio de borda de 50% nos cantos superior direito e superior esquerdo.
43. rounded-r-full : Um elemento com esta classe tem um raio de borda de 50% nos cantos inferior direito e superior direito.
44. rounded-b-full : Um elemento com esta classe tem um raio de borda de 50% em seus cantos inferior direito e inferior esquerdo.
45. rounded-l-full : Um elemento com esta classe tem um raio de borda de 50% nos cantos superior esquerdo e inferior esquerdo.
46. rounded-tl-none : O canto superior esquerdo do elemento é removido, enquanto os outros cantos são preservados.
47. rounded-tr-none : O canto superior direito do elemento é removido, enquanto os outros cantos são preservados.
48. rounded-br-none : O canto inferior direito do elemento é removido, enquanto os outros cantos são preservados.
49. rounded-bl-none : O canto inferior esquerdo do elemento é removido, enquanto os outros cantos são preservados.
50. rounded-tl-sm : Aplica um raio de borda de 0,125 rem (ou 2px) ao canto superior esquerdo do elemento.
51. rounded-tr-sm : Aplica um raio de borda de 0,125rem (ou 2px) ao canto superior direito do elemento.
52. rounded-br-sm : Aplica um raio de borda de 0,125rem (ou 2px) ao canto inferior direito do elemento.
53. rounded-bl-sm : Aplica um raio de borda de 0,125 rem (ou 2px) ao canto inferior esquerdo do elemento.
54. rounded-tl : Um raio de borda de 0,25 rem (ou 4px) é aplicado à borda superior esquerda do elemento usando esta classe.
55. rounded-tr : Um raio de borda de 0,25 rem (ou 4px) é aplicado à borda superior direita do elemento usando esta classe.
56. rounded-br : Um raio de borda de 0,25 rem (ou 4px) é aplicado à borda inferior direita do elemento usando esta classe.
57. rounded-bl : Um raio de borda de 0,25 rem (ou 4px) é aplicado à borda inferior esquerda do elemento usando esta classe.
58. rounded-tl-md : Nesse caso, o canto superior esquerdo do elemento tem um raio de borda de 0,375 rem (ou 6px).
59. rounded-tr-md : Nesse caso, o canto superior direito do elemento tem um raio de borda de 0,375 rem (ou 6px).
60. rounded-br-md : Neste caso, o canto inferior direito do elemento tem um raio de borda de 0,375rem (ou 6px).
61. rounded-bl-md : Nesse caso, o canto inferior esquerdo do elemento tem um raio de borda de 0,375 rem (ou 6px).
62. rounded-tl-lg : Ao usar esta classe, um raio de borda de 0,5 rem (equivalente a 8px) é aplicado apenas no canto superior esquerdo do elemento.
63. rounded-tr-lg : Ao usar esta classe, um raio de borda de 0,5 rem (equivalente a 8px) é aplicado apenas no canto superior direito do elemento.
64. rounded-br-lg : Ao usar esta classe, um raio de borda de 0,5 rem (equivalente a 8px) é aplicado apenas no canto inferior direito do elemento.
65. rounded-bl-lg : Ao usar esta classe, um raio de borda de 0,5 rem (equivalente a 8px) é aplicado apenas no canto inferior esquerdo do elemento.
66. rounded-tl-xl : Esta classe aplica um raio de borda de 0,75 rem (que é igual a 12px) especificamente no canto superior esquerdo do elemento.
67. rounded-tr-xl : Esta classe aplica um raio de borda de 0,75 rem (que é igual a 12px) especificamente no canto superior direito do elemento.
68. rounded-br-xl : Esta classe aplica um raio de borda de 0,75 rem (que é igual a 12px) especificamente no canto inferior direito do elemento.
69. rounded-bl-xl : Esta classe aplica um raio de borda de 0,75 rem (que é igual a 12px) especificamente no canto inferior esquerdo do elemento.
70. rounded-tl-2xl : Ao utilizar esta classe, o canto superior esquerdo do elemento recebe um raio de borda de 1rem (igual a 16px).
71. rounded-tr-2xl : Ao utilizar esta classe, o canto superior direito do elemento recebe um raio de borda de 1rem (igual a 16px).
72. rounded-br-2xl : Ao utilizar esta classe, o canto inferior direito do elemento recebe um raio de borda de 1rem (igual a 16px).
73. rounded-bl-2xl : Ao utilizar esta classe, o canto inferior esquerdo do elemento recebe um raio de borda de 1rem (igual a 16px).
74. rounded-tl-3xl : A aplicação dessa classe dá ao canto superior esquerdo do elemento um raio de borda de 1,5 rem (equivalente a 24px).
75. rounded-tr-3xl : A aplicação dessa classe dá ao canto superior direito do elemento um raio de borda de 1,5 rem (equivalente a 24px).
76. rounded-br-3xl : A aplicação desta classe dá ao canto inferior direito do elemento um raio de borda de 1,5 rem (equivalente a 24px).
77. rounded-bl-3xl : A aplicação desta classe dá ao canto inferior esquerdo do elemento um raio de borda de 1,5 rem (equivalente a 24px).
78. rounded-tl-full : Quando esta classe é aplicada, o canto superior esquerdo do elemento tem um raio de borda de 50%.
79. rounded-tr-full : Quando esta classe é aplicada, o canto superior direito do elemento tem um raio de borda de 50%.
80. rounded-br-full : Quando esta classe é aplicada, o canto inferior direito do elemento tem um raio de borda de 50%.
81. rounded-bl-full : Quando esta classe é aplicada, o canto inferior esquerdo do elemento tem um raio de borda de 50%.

Neste exemplo, cobrimos classes rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl e rounded-full no Tailwind:

Neste exemplo, exploraremos algumas das classes CSS Tailwind que nos permitem personalizar o raio da borda de cantos ou bordas específicos de um elemento.

Essas classes são conhecidas como arredondado-t-sm, arredondado-t-lg, arredondado-t-xl, arredondado-t-cheio, arredondado-b-sm, arredondado-b-lg, arredondado-b-xl e arredondado- b-completo:

Neste exemplo usamos as classes rounded-tr-sm, rounded-tr-lg, rounded-tl-3xl, rounded-tl-full, rounded-br-sm, rounded-br-lg, rounded-bl-3xl e arredondado-bl-cheio.:

Aqui, neste exemplo, demonstramos as classes Tailwind: rounded-r-md, rounded-r-xl, rounded-r-2xl, rounded-r-full, rounded-l-md, rounded-l-xl, rounded-l- 2xl e arredondado-l-cheio: