Cómo limitar la longitud del borde? - CSS

Al diseñar un sitio web, a veces, los usuarios enfrentan dificultades para crear un borde más corto que su elemento principal. Para superar esta dificultad, se utilizan múltiples propiedades CSS y elementos HTML. Para este objetivo, algunos elementos HTML, que incluyen "","", o "pseudo-elementos" y "bordeSe utilizan propiedades. Además, los usuarios pueden limitar el borde utilizando el "zurra","borde","fronterizo", y "fronterizo" propiedades.

Esta publicación explicó el método para limitar la longitud del borde en CSS.

Cómo limitar la longitud del borde con CSS?

Para limitar la longitud del borde con CSS, pruebe las instrucciones mencionadas una por una.

Paso 1: crear un contenedor Div

Primero, cree un contenedor Div con el ""Etiqueta y agregue el"clase"Atributo dentro de la etiqueta.

Paso 2: Contenedor Div Nested creado

Luego, agregue otro contenedor DIV entre las primeras etiquetas e inserte un "identificación" atributo:

Paso 3: diseñe el elemento "div"

Ahora, diseñe el "div"Al aplicar las siguientes propiedades de CSS:

.principal-div
Altura: 150px;
Ancho: 100px;
Posición: relativo;
Antecedentes: #B3F00B;

Los detalles del código mencionado anteriormente son los siguientes:

• Primero, acceda al contenedor con la ayuda del ".principal" clase.
• El agregado "altura"La propiedad define la altura del contenedor Div.
• Entonces, "ancho"Define el tamaño del ancho del elemento.
• Próximo, "posición"Asigna el tipo de método de posicionamiento utilizado para un elemento. Por ejemplo, hemos utilizado el "relativo"Cambiar la posición en relación con sí misma y el elemento principal.
• Después, "fondo"Se usa para establecer el fondo para el Div.

Producción

Paso 4: Establezca el borde inferior

Border-Bottom: 2px Solid #1C2AF5;

Para establecer el borde inferior de un div, el CSS "borde"Se utiliza. Aquí, el primer valor especifica el ancho del borde, el segundo es el estilo de borde, y el tercero es el color del borde.

Producción

Paso 5: Limite el borde izquierdo

#Border-izquierda
Border-izquierda: 2px Solid #2A1CF5;
Posición: Absoluto;
arriba: 50%;
Abajo: 0;

En el código de mención anterior, el "#Border-izquierda"Se usa para acceder al elemento DIV para aplicar las propiedades que cotizan a continuación:

• El "zurra"Es una propiedad abreviada que se utiliza para establecer el borde izquierdo del elemento.
• "arriba"La propiedad alinea verticalmente el elemento posicionado.
• "abajo"Se utiliza para alinear el borde inferior del elemento posicionado.
• "posición"La propiedad se establece como"absoluto"Para arreglar la posición del contenedor.

Producción

Hemos explicado el procedimiento para limitar la longitud del borde en CSS.

Conclusión

Para limitar la longitud del borde, primero, hacer un contenedor Div anidado con la ayuda del "" etiqueta. Luego, acceda a él utilizando la clase o ID específica y aplique las propiedades CSS para el estilo. A continuación, el CSS "borde"Se utiliza para establecer el borde inferior de un elemento y el"zurra"La propiedad agrega un borde en el lado izquierdo de un elemento. Este tutorial ha explicado cómo limitar la longitud del borde con CSS.