Efecto Css: Bordes con outline-offset

Holi~ ya me siento mucho mejor y ya no me duele nada :3 .. algún día en mi blog personal escribiré que paso conmigo.. fue algo que paso con unas hormiguitas asesinas xD .. bueno como me sentía mejor decidí traerles un pequeño y sencillo tuto de como colocar bordes como arriba con un code Css al que le llamé Outline-offset.. 

Es muy fácil solamente debes agregar el siguiente código en donde quieras colocar ese efecto {algún tittle por ejemplo}

outline-offset: -3px;
outline: 1px dashed #fff;
padding: 6px;

Y lo editas~
 outline-offset: acá va la cantidad de pixeles de la distancia en que tu borde estará del centro
{-3px -4px -5px se ira más haca el centro -2px -1px 0px se irá más hacia afuera.}

outline: el tipo, color y grosor del borde. {prometo hacer alguna entrada con todos los tipos de bordes que existen :3}

padding: evita que el contenido por ejemplo el texto se acerqué mucho al borde.

Un ejemplo de este código dentro de algún titulo puede ser este:

.h2 {
  padding: 6px;
  background: #9f2c3d;
  color: #FFF;
  font-size: 7pt;
  font-family: 'pf ronda';
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px #D69774;
  outline-offset: -3px;
  outline: 1px dashed #fff;}

lalala

La linea tendría que estar centrada pero a blogger le gusta distorsionar todo ¬¬

Bueno eso es todo, {les dije no era la gran cosa xD } espero les sirva el tuto~