Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos , como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre el borde de esquinas redondeadas de Primer CSS. Los bordes de esquinas redondeadas se utilizan para proporcionar el radio de borde CSS al borde creando bordes redondeados. Esto también se puede usar para hacer bordes circulares.
Sintaxis:
<div class="border rounded-*"> .... </div>
Nota: * se puede sustituir por cualquier número del 0 al 3 según el requisito del radio del borde .
Clases:
- rounded-0: esta clase se usa para establecer el radio del borde en 0, lo que básicamente elimina las esquinas redondeadas.
- rounded-1 : esta clase se usa para establecer el radio de borde de 4px.
- rounded-2: Esta clase se usa para establecer el border-radiusof 6px.
- rounded-3: esta clase se usa para establecer el radio de borde de 8px.
- circle: esta clase se utiliza para establecer el border-radius del 50%, lo que crea bordes circulares.
También podemos usar estas clases para crear específicamente esquinas de cualquier borde redondeado.
- redondeado-*-0
- redondeado-*-1
- redondeado-*-2
- redondeado-*-3
Nota: El * se puede sustituir con valores como arriba, derecha, abajo e izquierda
Ejemplo 1: En este ejemplo, aprenderemos sobre las clases rounded-0 , rounded-1 , rounded-2 , rounded-3 y circle . Para su mejor comprensión, estamos utilizando los colores de borde CSS para que los cambios se puedan ver más claramente.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body style="padding:1%;width:50%"> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Rounded Corners Border</h3> <h2>rounded-0</h2> <div class="border rounded-0" style="border-color:violet !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-1</h2> <div class="border rounded-1" style="border-color:red !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-2</h2> <div class="border rounded-2" style="border-color:green !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-3</h2> <div class="border rounded-3" style="border-color: blue !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>Circle</h2> <div class="border circle" style= "width:100px; height:100px;background-color:green;"> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos a crear esquinas redondeadas o bordes particulares usando las clases rounded-right-0 , rounded-right-1 , rounded-right-2 y rounded-right- 3 .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body style="padding:1%;width:50%"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Rounded Corners Border</h3> <h2>rounded-right-0</h2> <div class="border rounded-right-0" style="border-color:violet !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-right-1</h2> <div class="border rounded-right-1" style="border-color:red !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-right-2</h2> <div class="border rounded-right-2" style="border-color:green !important;"> GeeksforGeeks is a computer science portal. </div> <br> <h2>rounded-right-3</h2> <div class="border rounded-right-3" style="border-color: blue !important;"> GeeksforGeeks is a computer science portal. </div> </body> </html>
Producción:
Nota: puede notar que solo las esquinas del borde derecho están redondeadas .
Referencia: https://primer.style/css/utilities/borders#rounded-corners
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA