Definir borda interna em CSS

1. Use a propriedade box-sizing para definir a borda interna em CSS
2. Use a propriedade box-shadow para definir a borda interna em CSS
3. Use as propriedades outline e outline-offset para definir a borda interna em CSS

Neste artigo, apresentaremos métodos para definir bordas dentro de um contêiner em CSS. A borda dentro de um contêiner é chamada de borda interna.

Use a propriedade box-sizing para definir a borda interna em CSS

Quando adicionamos uma borda ou preenchimento a um elemento dentro de um contêiner, o tamanho do contêiner aumentará. O tamanho será diferente do inicial. Para eliminar o problema, podemos adicionar uma borda interna ao contêiner.

A borda interna é um espaço criado entre a propriedade ou elemento de contorno e contorno. Podemos aplicar uma borda interna ao conteúdo da tabela, imagens e texto de parágrafos e cabeçalhos. Uma borda interna pode ter qualquer formato, como retangular, quadrada, circular, etc.

A borda interna não aumentará o tamanho do contêiner e o tamanho predefinido será constante. Podemos usar a propriedade box-sizing para criar uma borda interna em CSS. Definir a propriedade box-sizing como border-box incluirá a borda e o preenchimento dentro da dimensão do contêiner.

Por exemplo, estilize um div definindo a propriedade box-sizing como border-box. Defina a altura e largura de div para 200px. Em seguida, crie uma borda solid de largura 10px e cor red. Em seguida, defina a propriedade background como green.

Aqui, criamos um div com dimensões de 200x200 px. Mesmo se adicionarmos uma borda de 10px, a dimensão do contêiner não mudou. A borda fica dentro do contêiner. Assim, podemos usar a propriedade box-sizing para definir a borda interna em CSS.

Código de exemplo:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

Use a propriedade box-shadow para definir a borda interna em CSS

Outra maneira de atingir a borda interna é usar a propriedade CSS box-shadow. Usando a propriedade, podemos especificar a sombra inserida que se pareceria com uma borda interna em vez de uma sombra.

Podemos definir os valores de deslocamento horizontal e vertical para box-shadow como os dois primeiros valores. Os outros três valores, desfoque, dispersão e cor, são opcionais. Podemos definir o raio de propagação com o valor desejado para criar uma sombra. Em seguida, usar a opção inset irá alterar a sombra externa para a sombra interna. A sombra cairá dentro do contêiner. Finalmente, parece uma borda interna.

Por exemplo, defina as propriedades height e width de div como 200px. Defina a cor do plano de fundo como verde. Em seguida, use a propriedade box-shadow e defina as três primeiras opções como 0px. Defina o raio de propagação, a quarta opção para 10px. Dê a cor vermelha e defina a opção inset.

Aqui, criamos uma borda interna com a largura de 10px usando a propriedade box-shadow.

Código de exemplo:

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

Use as propriedades outline e outline-offset para definir a borda interna em CSS

Podemos definir a borda interna usando as propriedades outline e outline-offset em CSS. A propriedade outline descreve o tamanho da borda do elemento, tipo de borda e cor da borda. A propriedade outline-offset descreve a distância ou espaço entre a borda e o elemento de contorno.

Por exemplo, defina a altura e largura do div para 200px. Dê a cor verde como fundo. A seguir, defina outline como 5px solid red. Em seguida, defina outline-offset para -5px.

Aqui, a propriedade outline ma borda externa no contêiner. Usar a propriedade outline-offset e defini-la com o valor negativo da largura da borda mudará a borda externa para a borda interna.

Código de exemplo:

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>