Primeros bordes CSS – Barcelona Geeks

Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.

Primer CSS Borders es una clase de utilidad que aplica bordes a un contenedor div de HTML simplemente aplicando la clase proporcionada. Incluso podemos personalizar el estilo del borde.

Primer CSS Tipos y clases de bordes:

Borde predeterminado : utiliza el borde de la clase y crea un borde predeterminado con una línea sólida alrededor del contenedor div.
Estilo de borde : utiliza la clase borde discontinuo y crea un borde con una línea discontinua alrededor del contenedor div.
Borde de esquinas redondeadas : utiliza las siguientes clases diferentes para aplicar diferentes cantidades de redondez a los bordes.
Bordes sensibles: los bordes pueden ser sensibles utilizando las siguientes clases.
Colores de borde: podemos usar las siguientes clases de color de borde.

Sintaxis : cree un contenedor con un borde de la siguiente manera:

<div class="border">
    Welcome to GeeksforGeeks. It is a 
    computer science portal for geeks. 
    It has tutorials for Data Structures, 
    Algorithms, Programming Languages,
    etc.
</div>

Ejemplo 1: En el siguiente ejemplo, tenemos un contenedor con un párrafo que contiene bordes con bordes redondeados.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border rounded-2 p-2">
            Welcome to GeeksforGeeks. It is a computer
            science portal for geeks. It has tutorials
            for Data Structures, Algorithms, Programming
            Languages, etc.
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: En el siguiente ejemplo, tenemos algunos contenedores con diferentes colores de borde.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border rounded-2 p-2
                    color-border-success-emphasis">
            Welcome to GeeksforGeeks.
        </div>
        <br />
        <div class="border rounded-2 p-2
                    color-border-danger-emphasis">
            It is a computer science portal for geeks.
        </div>
        <br />
        <div class="border rounded-2 p-2
                    color-border-sponsors-emphasis">
            It has tutorials for Data Structures, Algorithms,
            Programming Languages, etc.
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 3: En el siguiente ejemplo, tenemos diferentes contenedores con bordes sensibles. Estamos haciendo zoom para ver los bordes de diferentes tamaños.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks | Primer CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">GeeksforGeeks</h1>
            </div>
            <strong>Primer CSS Borders</strong>
            <br />
            <br />
        </center>
        <div class="border-sm rounded-2 p-2
                    color-border-success-emphasis">
            Welcome to GeeksforGeeks.
        </div>
        <br />
        <div class="border-md rounded-2 p-2
                    color-border-danger-emphasis">
            It is a computer science portal for geeks.
        </div>
        <br />
        <div class="border-lg rounded-2 p-2
                    color-border-sponsors-emphasis">
            It has tutorials for Data Structures, Algorithms,
            Programming Languages, etc.
        </div>
    </div>
</body>
</html>

Producción:

Referencia: https://primer.style/css/utilities/borders

Publicación traducida automáticamente

Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta