Os desenvolvedores podem aplicar várias propriedades CSS para tornar suas páginas da web mais atraentes, como “altura" e "largura”Propriedades para o tamanho da configuração,“alinhamento de texto”Para ajustar o texto,“estilo de borda" e "Radio de fronteira”Propriedades para definir a borda ao redor do elemento. Além disso, você pode adicionar uma borda de acordo com seus requisitos, como em um lado do elemento, apenas para tornar as coisas por trás dos objetos mais visíveis.

Este post demonstrará:

• • Método 1: Defina a borda de um lado
  • Método 2: Defina a borda de todos os lados com diferentes estilos

Método 1: Defina a borda de um lado

No CSS, os usuários podem definir a borda em um lado do elemento desejado. Para esse fim, o “borda esquerda","fronteira-direita","Border-top" e "fundo de fronteira”As propriedades são usadas para adicionar fronteiras à esquerda, direita, superior ou inferior.

Nesta seção, definiremos especificamente a borda no lado esquerdo do contêiner. Para fazer isso, siga as instruções abaixo mencionadas.

Etapa 1: Crie um contêiner div

Primeiro, crie um contêiner de div com a ajuda do “" marcação. Insira um “eu ia”Atribua e atribua um nome ao ID.

Etapa 2: Insira o cabeçalho

Em seguida, utilize o “<H1>”Tag para adicionar um título dentro do contêiner Div. Além disso, você também pode usar outras tags de cabeçalho de acordo com o requisito, como “<H1>" para "<H6>" Tag:

Borda de um lado

Pode -se observar que o contêiner foi criado com sucesso:

Etapa 3: Access Div Container

Agora, acesse o contêiner HTML DIV e acesse o nome da classe. Para fazer isso, um seletor de classe “#”É usado com o nome da classe.

Etapa 4: Insira a borda apenas de um lado

Depois de acessar o contêiner DIV, aplique as propriedades CSS abaixo mencionadas:

#main-div
Interação da borda: 5px vermelho sólido;
Antecedentes: RGB (56, 239, 245);
margem: 20px 100px;
Largura: 200px; Altura: 150px

Aqui:

• • ““borda esquerda é uma propriedade abreviada para definir a largura, estilo e cor da borda esquerda.
  • ““fundo”A propriedade é utilizada para ajustar a cor de fundo do elemento.
  • ““margem”Propriedades definem o espaço fora do limite.
  • ““largura”Define o tamanho da largura do elemento em um recipiente.

A imagem resultante mostra a borda apenas com um lado:

Método 2: Defina a borda de todos os lados com diferentes estilos

Para definir a borda de todos os lados com cores diferentes, utilize o código HTML acima. Em seguida, acesse o contêiner Div com a ajuda do nome e seletor de identificação:

#main-div
margem: 80px;
largura de borda: 8px 2px 1px 10px;
Radio de fronteira: 50px;
estilo de fronteira: inserida sólida pontilhada dupla;
cor de borda: RGB (40, 5, 235) RGB (238, 146, 9) RGB (255, 0, 242) RGB (19, 19, 18);

No código fornecido acima:

• • ““margem”Especifica o espaço em branco fora do elemento.
  • ““largura de fronteira”Define a largura com valores diferentes para cada lado. Por exemplo, adicionamos valores diferentes em pixels.
  • ““Radio de fronteira”É utilizado para fazer a curva redonda da fronteira.
  • ““estilo de borda”A propriedade é usada para definir o estilo da fronteira. Nesse cenário, quatro tipos diferentes de estilos são definidos para cada lado da borda.
  • ““Cor da borda”A propriedade é utilizada para alocar a cor na fronteira. Aqui, o valor para cada lado é definido como uma cor diferente.

Como resultado, a fronteira com estilos diferentes de cada lado será aplicada:

Neste artigo, você aprendeu maneiras diferentes de definir a fronteira CSS em um e vários lados.

Conclusão

Para definir a borda apenas de um lado, primeiro, crie um div usando o “" elemento. Em seguida, acesse o contêiner Div e aplique as propriedades CSS. Depois disso, use qualquer propriedade entre estes, incluindo “borda esquerda","fronteira-direita","Border-top" e "fundo de fronteira”Para definir a borda lateral. Além disso, os usuários também podem definir o “largura de fronteira","estilo de borda" e "Cor da borda”Separadamente em cada lado da fronteira. Este post explicou o método para definir a fronteira CSS apenas de um lado.