O estilo de um site HTML é controlado pelo CSS, que também é uma parte fundamental do HTML. Uma das propriedades de estilo fornecidas pelo CSS é o “fronteira" propriedade. Principalmente as fronteiras são criadas fora dos elementos, mas o CSS nos permite inserir uma borda dentro de um elemento com a ajuda de diferentes propriedades, que são de caixa, contorno e tamanho de caixa.

Neste artigo, aprenderemos o procedimento para colocar fronteiras dentro do div usando:

• Propriedade de Shadow Box
• esboço com propriedade de esboço
• propriedade de tamanho de caixa

Então vamos começar!

Método 1: Coloque uma fronteira dentro de um div usando a propriedade "Box-Shadow"

Podemos colocar uma borda dentro do div usando o “Sombra da caixa" propriedade. Então, primeiro, atravesse a propriedade de sombra de caixa e sua funcionalidade.

O que é a propriedade "Shadow"?

No CSS, o “Sombra da caixa”A propriedade nos permite definir uma sombra para qualquer elemento ou imagem. Esta propriedade é baseada nos seguintes valores:

• offset-x: É usado para adicionar sombra horizontal.
• Offset-y: É usado para adicionar sombra vertical.
• cor: É utilizado para colocar a cor da sombra.

Sintaxe

Para esclarecer esses pontos, vamos para a sintaxe da propriedade de sombra de caixa:

Shadow Box: Offset-X Offset-Y Blurius espalhe a cor inserida;

Aqui está a descrição relacionada aos valores mencionados acima:

• ““deslocamento-x" e "Offset-y”Pode ser positivo ou negativo.
• ““Blur-Radius”Torna a sombra mais brilhante ou mais leve.
• Usando “espalhar”, Você pode definir o tamanho da sombra.
• No lugar de "cor”, Você atribuirá qualquer cor que deseja dar à imagem.
• ““inserir”É usado para definir a sombra dentro do elemento. Se você não usar, uma sombra aparecerá fora da caixa.

Observação: ““Blur-Radius","espalhar", e "inserir”São os valores opcionais da propriedade. Você pode usar esses valores em alguns casos especiais.

Para uma melhor compreensão do uso da propriedade de sombra de caixa, vamos implementar um exemplo prático.

Exemplo

Na seção HTML, criaremos um contêiner usando tags e cabeçalho

dentro dele.

Html

"Borda sólida dentro da div"

Em seguida, no arquivo CSS, usaremos “div”Para acessar o Div já criado e colocar a fronteira dentro dela seguindo as instruções dadas:

• Defina a largura e a altura da div como “700px" e "250px”.
• Especifique a cor do texto como “RGB (13, 214, 214)”.
• Defina os valores para o alinhamento de texto usando a propriedade de altura de linha como “200px”E propriedade de alinhamento de texto como“Centro”.
• Ao usar a propriedade em segundo plano, defina a cor de fundo da div como “preto”.
• Crie uma fronteira usando a propriedade de fronteira com “15px" largura, "sólido"Forma e"preto" cor.
• Para Inside Shadow, use o “Sombra da caixaPropriedade e defina o valor de deslocamento-x, deslocamento-y e desfoque como “0px", Espalhado como"5px", A cor da sombra como"RGB (255, 251, 0)" E use "inserir”Para colocar a fronteira dentro da div.

CSS

div
Largura: 700px;
Altura: 250px;
Cor: RGB (255, 238, 0);
altura de linha: 200px;
Alinhamento de texto: centro;
Antecedentes: preto;
borda: 15px preto sólido;
Caixa-shadow: 0px 0px 0px 5px RGB (255, 238, 0) Inserção;

Observação: O valor de deslocamento-x e deslocamento-y é definido como 0 porque precisamos de fronteiras por todos os lados da div.

Depois de implementar o código fornecido, vá para o arquivo HTML e execute -o para ver o seguinte resultado:

Observação: Aumentando o valor do “espalhar”, Você pode aumentar a largura da fronteira.

Método 2: Coloque uma fronteira dentro de um div usando a propriedade "contorno" e "esboço"

O "contorno”A propriedade é usada para definir a linha fora do elemento. É a propriedade abreviada de “largura de esboço","estilo de esboço", e "contorno-cor”. A sintaxe da propriedade de esboço é a seguinte:

Esboço: contorno de contorno de contorno de contorno

Aqui está a descrição relacionada aos valores mencionados acima:

• largura de esboço: É usado para definir a largura do esboço.
• estilo de esboço: É usado para definir o estilo do esboço.
• contorno-cor: É utilizado para especificar a cor do contorno.

Da mesma forma, o “Offset de esboço”A propriedade é usada para definir o espaço entre a borda do elemento e o esboço. Este espaço é transparente. A sintaxe da propriedade de esboço é:

Desbaste de esboço: Valor

No local de valor, você pode definir o espaço que deseja definir entre a borda do elemento e o contorno. Ele cria um esboço dentro do elemento quando um valor negativo é especificado.

Vamos passar para o exemplo de criar uma fronteira dentro da div.

Exemplo

Neste exemplo, criaremos dois divs com nomes de classe “Div1" e "div2”E adicione um título dentro dele usando

marcação.

Html

"Borda de cume dentro da div"

"Border dupla dentro da div"

No CSS, use “Div1”Para acessar o contêiner que criamos no arquivo html. Para inserir a borda dentro da div, siga as instruções dadas:

• Defina a largura e a altura da div como “500px”.
• Ajuste o raio da fronteira para “50%”.
• Defina a cor do texto como “RGB (13, 214, 214)”.
• Defina os valores para o alinhamento de texto usando a propriedade de altura de linha como “500px”E propriedade de alinhamento de texto como“Centro”.
• Ao usar a propriedade em segundo plano, defina a cor de fundo da div como “preto”.
• Crie uma fronteira usando a propriedade de fronteira como “15px","sólido", e "preto”.
• Para a fronteira interna, use o “contorno”Propriedade e defina o valor como“10px","cume", e "RGB (0, 255, 242)”E defina o valor de“Offset de esboço" como "-25px”Para colocar a fronteira dentro da div.

CSS

.div1
Largura: 500px;
Altura: 500px;
Radio de fronteira: 50%;
Cor: RGB (13, 214, 214);
altura de linha: 500px;
Alinhamento de texto: centro;
Antecedentes: preto;
Esboço: 10px Ridge RGB (0, 255, 242);
Offset de esboço: -25px;

Para o estilo da segunda div, mude apenas o estilo do esboço usando o “contornoPropriedade e defina os valores da seguinte forma:

Esboço: 10px duplo RGB (0, 255, 242);

Método 3: Coloque uma fronteira dentro de um div usando a propriedade “dimensionamento de caixa”

CSS “tamanho de caixa”A propriedade calcula a largura e a altura do elemento. A sintaxe da propriedade de tamanho de caixa é:

tamanho de caixa: valor

No local de valor, você pode definir o valor do tamanho de caixa como “caixa de conteúdo" e "Border-box”.

Exemplo

No exemplo abaixo dado, criaremos um nome de classe Div “Div1”E adicione um título dentro dele.

Html

"Borda de ranhura dentro da div"

No CSS, usaremos “Div1”Para acessar a div criada. Em seguida, insira a fronteira dentro da div, como segue:

• Defina a largura e a altura da div como “550px”.
• Defina a cor do texto como “RGB (2, 255, 137)”.
• Defina os valores para o alinhamento do texto usando a propriedade de altura de linha como “420px”E propriedade de alinhamento de texto como“Centro”.
• Ao usar a propriedade em segundo plano, defina a cor de fundo da div como “preto”.
• Crie uma fronteira usando propriedades de fronteira como “50px","sulco", e "RGB (81, 255, 0)”.
• Em seguida, use o “fronteira”Propriedade e defina o valor como“50px","sulco", e "RGB (81, 255, 0)”E defina o valor de“tamanho de caixa" como "Border-box”Para colocar a fronteira dentro da div.

.div1
Largura: 550px;
Altura: 550px;
Cor: RGB (2, 255, 137);
altura da linha: 420px;
Alinhamento de texto: centro;
Antecedentes: preto;
fronteira: 30px RGB (81, 255, 0);
Timing de caixa: caixa de fronteira;

Depois de implementar o código fornecido, você verá a seguinte saída:

Fornecemos as três maneiras mais fáceis de colocar uma fronteira dentro de um div usando CSS.

Conclusão

Para colocar uma fronteira dentro da div, primeiro, crie uma borda usando o “fronteira”Propriedade, então use a“Sombra da caixa" e "contorno" com "Offset de esboço" e "tamanho de caixa”Propriedades do CSS. A propriedade da fronteira cria uma borda ao redor do elemento, e as outras quatro propriedades podem ser usadas para mover a borda dentro da div. Como resultado deste artigo, mostramos os três métodos mais fáceis para colocar fronteiras dentro da div.
Para colocar uma fronteira dentro da div, primeiro, crie uma borda usando o “fronteira”Propriedade, então use a“Sombra da caixa" e "contorno" com "Offset de esboço" e "tamanho de caixa”Propriedades do CSS. A propriedade da fronteira cria uma borda ao redor do elemento, e as outras quatro propriedades podem ser usadas para mover a borda dentro da div. Como resultado deste artigo, mostramos os três métodos mais fáceis para colocar fronteiras dentro da div.