Em HTML, para desenhar ou colocar fronteiras dentro de um recipiente de div, existe um método simples. Os usuários podem utilizar o CSS “fronteira”Propriedade e mova -a dentro da caixa do elemento usando o CSS“Sombra da caixa”Propriedade com um valor inserido e defina o valor. Além disso, "tamanho da caixa”É utilizado para definir o tamanho da caixa e o valor“Border-box”Inclui preenchimento e borda na largura e altura do elemento.

Este post explicará o procedimento para colocar a borda dentro da div e não em sua borda.

Como colocar a fronteira dentro da div e não na sua borda?

Para colocar a fronteira dentro da div e não na borda, experimente o procedimento mencionado.

Etapa 1: Insira o cabeçalho

Primeiro, adicione um título com a ajuda de uma tag de título de “

" para "

”. Para fazer isso, o

A tag é utilizada:

Linuxhint Ltd UK

Etapa 2: Faça o Div Container

Em seguida, utilize o “”Tag para fazer um contêiner. Além disso, insira o atributo de classe dentro da tag de abertura da div. Os usuários também podem adicionar vários atributos de classe no contêiner Div único, atribuindo nomes a um atributo de classe. Por exemplo, definiremos três nomes diferentes de classe em um contêiner “caixa","círculo", e "fronteira”:

Etapa 3: cabeçalho de estilo

Em seguida, acesse o cabeçalho e aplique diferentes propriedades CSS para estilo:

H1
estilo de fonte: itálico;
cor azul;

Aqui:

• ““estilo de fonte”Propriedade especifica o estilo da fonte como“itálico”.
• ““cor”É utilizado para definir a cor do cabeçalho como“azul”.

Etapa 4: Classe de estilo “Box”

Agora, acesse o “.caixa”Classe usando o seletor de pontos. Em seguida, aplique as seguintes propriedades CSS:

.caixa
Altura: 160px;
Largura: 160px;
Antecedentes: RGB (161, 229, 250);
Margem: 20px 50px;

De acordo com o snippet de código fornecido:

• ““altura”Define o tamanho do elemento verticalmente.
• ““largura”Propriedade aloca uma largura específica para o elemento.
• ““fundo”Propriedade define uma cor específica para o fundo do elemento.
• ““margem”Define espaços ao redor do elemento.

Saída

Etapa 5: Classe de estilo “Border”

Utilize o “.fronteira”Para acessar a segunda classe e aplicar propriedades listadas abaixo:

.fronteira
borda: 20px RGB sólido (161, 229, 250);
Timing de caixa: caixa de fronteira;
Shadow de caixa: inserção 0px 0px 0px 12px RGB (15, 15, 15);

Aqui:

• ““fronteiraA propriedade define um limite fora do elemento.
• ““tamanho da caixa”É utilizado para definir o tamanho da caixa e o valor“Border-box”Inclui preenchimento e borda na largura e altura do elemento.
• ““Sombra da caixa”Propriedade insere uma sombra fora de um elemento. Para fazer isso, o “inserir”O valor é definido com uma cor específica como“RGB (15, 15, 15)”.

Saída

Etapa 6: Classe de estilo “Circle”

Acesse a terceira classe usando seu “.círculo”:

.círculo
Radio de fronteira: 50%;

Então, aplique o “Radio de fronteira”Propriedade para fazer a curva em volta de todos os lados. Mais especificamente, ele será utilizado para fazer o canto da borda externa rodada na forma de um elemento. Os usuários podem criar cantos circulares com a ajuda de um único raio ou cantos elípticos com dois raios.

Saída

Isso se tratava de colocar a fronteira dentro da div e não na sua borda.

Conclusão

Para colocar a fronteira dentro da div e não em sua borda, primeiro crie um recipiente de div um com a ajuda de “”. Em seguida, adicione uma borda usando o “fronteira”Propriedade e utilizar“tamanho de caixa”Para definir o tamanho da caixa. Seu valor inclui uma borda e preenchimento na largura e altura do elemento. Depois disso, utilize o “Sombra da caixa”Propriedade que insere uma sombra fora de um elemento. Este artigo demonstrou o procedimento para colocar a borda dentro de uma div, mas não na sua borda.