Os usuários podem aplicar várias propriedades CSS para tornar as páginas da web atraentes como “altura","largura","alinhamento de texto","estilo de borda","Radio de fronteira", e "preenchimento”. Mais especificamente, o “fronteira”A propriedade adiciona a borda ao redor do elemento. Além disso, o usuário pode querer adicionar uma borda transparente ao redor do elemento para tornar as coisas por trás dos objetos mais visíveis. O "fronteiraAtributo "com o"RGBA”O valor é então usado para definir a opacidade da fronteira.

Este post explicará o método para fazer uma fronteira transparente com a ajuda das propriedades do CSS.

Como fazer uma borda transparente com CSS?

Para fazer uma borda transparente com CSS, experimente o procedimento fornecido.

Etapa 1: Crie um contêiner div

Primeiro, crie um “”Contêiner no corpo HTML. Adicione um atributo de classe dentro do elemento.

Etapa 2: Adicionar cabeçalho

Em seguida, adicione um título com a ajuda do “

”Tag e use o“alinhar”Atributo para especificar o cabeçalho no centro da div. Em seguida, adicione o texto entre as tags de tabela adicionadas:

Linuxhint Tutorial Website Ltd UK

Saída

Etapa 3: Defina a cor de fundo

corpo
cor de fundo: RGB (8, 8, 14);

Aqui, acesse o corpo pelo nome da tag e especifique a cor de fundo, utilizando o “cor de fundo" propriedade.

Etapa 4: desvio de estilo com CSS

H1
Cor: RGB (23, 83, 5);

Agora, aplique o “cor”Propriedade para estilizar o texto do cabeçalho usando o nome da tag“H1”.

Etapa 5: Faça borda sólida

Em seguida, acesse o “.conteúdo externo”Classe e especifique as propriedades CSS mencionadas:

.Conteúdo externo
borda: 10px RGB sólido (25, 140, 194);
Largura: 200px;
Altura: 200px;
margem: automático;
Alinhamento de texto: centro;
Radio de fronteira: 7px;
preenchimento: 4px;

Aqui:

• O "fronteira”A propriedade é usada para fazer uma borda em torno de um elemento.
• O "largura”Especifica a largura do elemento.
• O "altura”Propriedade aloca a altura do contêiner.
• O "margem”Define o lado externo do espaço da borda definida.
• ““alinhamento de texto”A propriedade é utilizada para definir o texto no centro.
• ““Radio de fronteira”Propriedade roda o canto da fronteira de acordo com o valor.
• ““preenchimento”Especifica o espaço em torno do conteúdo do elemento.

Pode -se notar que uma borda sólida foi definida em torno do elemento:

Etapa 6: Faça transparente na fronteira

Fronteira: 10px RGBA sólido (114, 200, 240, 0.3);

Para tornar a fronteira transparente, use o “fronteira”Propriedade e atribua o valor com o“RGBA”Picker de cores. Aqui, os três primeiros valores especificam a cor RGB, e o quarto valor define a opacidade da borda. Por exemplo, a opacidade é atribuída como “0.3”Para tornar a fronteira transparente:

Saída

Este blog demonstrou as instruções para fazer uma borda transparente com CSS.

Conclusão

Para fazer uma borda transparente com CSS, primeiro, acesse a div com a ajuda do especificado “aula”. Então, utilize o “fronteira”Propriedade e defina a cor e a opacidade da fronteira usando o“RGBA”Picker de cores. Onde "rgb”É para as cores vermelha, verde e azul, e o“a”É usado para definir o valor da opacidade para tornar a fronteira transparente. Este post explicou o procedimento para tornar a fronteira transparente com o CSS.