Как сделать рамку у блока с градиентом и закруглением?

Question

[Мариана Марианова]

Добрый день. Есть код https://codepen.io/anon/pen/gdYRMG
Необходимо чтобы при наведении на ссылку у рамки появлялся градиент. Градиент вроде появляется а border-radius игнорируется

Answer 1

[Владимир Проскурин]

Судя по спецификации, нельзя https://www.w3.org/TR/css-backgrounds-3/#corner-cl... сделайте через псевоэлемент или оберните в дополнительный блок, которому поставьте border-radius и фон (не рамку, а именно фон) градиентом, а для ширины рамки добавьте padding
Вот пример

Comments

[ixon]

Лучше ещё и добавить в .icon-vkontakte div border-radius:5px, чтобы рамка не выглядела углаватой изнутри.

[Владимир Проскурин]

ixon, я обновил сразу, только не на 5 а на 3

Answer 2

[ixon]

Это невозможно, 3WC пишет по этому поводу:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

Но вы можете использовать в качестве рамки другой блок, который будет снаружи.