Как сделать контурную обводку png?

Question

[Mesuti]

Привет!
Есть изображение с формами.
Как сделать его обводку?
Обычный border дает только квадратную обводку.
Пример jsfiddle
Хочу сделать круглую обводку при ховере

Comments

[Антон Спирин]

border-radius не?

[Mesuti]

Антон Спирин, а если сложная обводка? узорами.

[Антон Спирин]

Александр Сорокин, border-image вам в помощь

[Ankhena]

Круглая - border-radius
Не круглая - переводить в SVG, изменять stroke
css.yoksel.ru/svg-fill-and-stroke

Answer 1

[impexler]

в фотошопе

Answer 2

[ned4ded]

Добрый день. Т.к. изображение круглое, можно обойтись и без фотошопа. Удалите тег img. Сделайте картинку из img фоном для тега a. Используйте свойство border-radius. Пример:

.shake {
  display:block;
  width: 90px;
  height: 90px;
  border: 5px solid transparent;
  border-radius: 100%;
  background-image: url(http://xn----8sbacs4bcidfthwu.xn--p1ai/wp-includes/images/call-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

.shake:hover {
  border: 5px solid hsl(0, 100%, 50%);
}

Пример на фидле.