3 maneiras de colocar borda separada(CSS)

Boa noite, leitores.

Lembram que eu falei sobre minhas provas? Bem, já recebi o resultado de três delas e foram bem animadores: um oito em português, um oito e meio em história e  um nove em matemática, minha matéria favorita em que a minha nota foi inclusive a melhor da sala. Foi bom que eu consegui mostrar para minha mãe que meu seis passado foi apenas uma leve queda, nada que deva preocupar muito. Fora isso, o resto do meu dia foi um tanto parado e cansativo por causa da natação, mas não tem coisa melhor que se exercitar, principalmente na água, aqui fala uma semideusa filha de Poseidon e não, eu não sou lerda como o Percy, apesar de que algumas pessoas acharem isso :c

Como faz tempo que não posto um tutorial aqui, resolvi trazer um que podem ter seu resultado obtido através de três maneiras (conhecidas por mim). Hoje vou ensinar como aplicar a bordinha separada por css, para quem não sabe do que estou falando, é essa borda que uso atualmente nas ilustrações aqui do blog. Sei que muita gente já sabe, mas como vou explicar mais de uma maneira, vocês podem escolher qual é o melhor para vocês ou até o mais fácil de ser aplicado. Ah e já tinha me esquecido, esqueci de agradecer pelor 15(8) seguidores, ultrapassamos a meta e nem havia notado (nossa, como sou atenciosa) e fiquei muito feliz com isso, de verdade. Até outro dia  =.=~

Primeiro jeito

.borda1 {

padding:2px; 

border:1px solid #cordaborda;

Segundo jeito

.borda1 {

padding:3px;

border: 1px double #cordaborda; }

Terceiro jeito

.borda1 {

outline-style:dashed;

outline-width:1px;

outline-color: #cordaborda;

outline-offset: 2px; }

Lembrando que vocês também podem alterar o número de pixels que elas ficam separadas das imagens e utilizar diferentes tipos de porta, as que eu mais recomendo são a solid e a dashed.

E para usar é só colar esse código em um gadget HTML/Javascript ou onde você quiser:

<img src="linkdaimagem" class="borda1"/>

}