Como limitar o comprimento da borda? - CSS

Ao projetar um site, às vezes, os usuários enfrentam dificuldade em criar uma borda mais curta que seu elemento pai. Para superar essa dificuldade, várias propriedades CSS e elementos HTML são usados. Para este objetivo, alguns elementos HTML, incluindo “","", ou "Pseudo-elementos" e "fronteira”As propriedades são usadas. Além disso, os usuários podem limitar a fronteira usando o “borda esquerda","fundo de fronteira","fronteira-direita", e "Border-top”Propriedades.

Este post explicou o método para limitar o comprimento da borda no CSS.

Como limitar o comprimento da borda com CSS?

Para limitar o comprimento da borda com CSS, experimente as instruções mencionadas uma a uma.

Etapa 1: Crie um contêiner div

Primeiro, crie um recipiente de div com o “”Tag e adicione o“aula”Atributo dentro da tag.

Etapa 2: contêiner de divisão aninhado criado

Em seguida, adicione outro recipiente de div entre as primeiras tags e insira um “eu ia”Atributo:

Etapa 3: estilo o elemento “div”

Agora, estilize o “div”Ao aplicar as seguintes propriedades CSS:

.main-div
Altura: 150px;
Largura: 100px;
Posição: relativa;
Antecedentes: #B3F00B;

Os detalhes do código acima mencionado são os seguintes:

• Primeiro, acesse o contêiner com a ajuda do “.Principal-Div" aula.
• O adicionado “altura”Propriedade define a altura do contêiner div.
• Então, "largura”Define o tamanho da largura do elemento.
• Próximo, "posição”Aloca o tipo de método de posicionamento usado para um elemento. Por exemplo, utilizamos o “relativo”Para mudar a posição em relação a si e ao elemento pai.
• Depois disso, "fundo”É usado para definir o plano de fundo para a div.

Saída

Etapa 4: Defina a borda inferior

fundo de borda: 2px Solid #1C2AF5;

Para definir a borda inferior de uma div, o CSS “fundo de fronteira”É utilizado. Aqui, o primeiro valor especifica a largura da borda, o segundo é o estilo de borda e o terceiro é a cor da borda.

Saída

Etapa 5: limite a borda esquerda

#Border-left
Border-Ift: 2px Solid #2A1CF5;
Posição: Absoluto;
TOP: 50%;
Inferior: 0;

No código mencionado acima, o “#borda-esquerda”É usado para acessar o elemento div para aplicar as propriedades abaixo da listada:

• O "borda esquerda”É uma propriedade abreviada que é utilizada para definir a borda esquerda do elemento.
• ““principal”Propriedade alinha verticalmente o elemento posicionado.
• ““fundo”É utilizado para alinhar a borda inferior do elemento posicionado.
• ““posição”A propriedade é definida como“absoluto”Para consertar a posição do contêiner.

Saída

Explicamos o procedimento para limitar o comprimento da borda no CSS.

Conclusão

Para limitar o comprimento da borda, primeiro, faça um contêiner de divisão aninhado com a ajuda do “" marcação. Em seguida, acessá -lo usando a classe ou ID específico e aplique as propriedades CSS para estilo. Em seguida, o CSS “fundo de fronteira”É utilizado para definir a borda inferior de um elemento e o“borda esquerda”A propriedade adiciona uma borda no lado esquerdo de um elemento. Este tutorial explicou como limitar o comprimento da borda com CSS.