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

Question

[Игорь Касперский]

Всем привет, не знаю как округлить уголки border

border: 5px solid;
	border-image: -moz-linear-gradient(to top, #000 10%, blue 50%)1% 1;
	border-image: -webkit-linear-gradient(to top, #000 10%, blue 50%)1% 1;
	border-image: linear-gradient(to top, #000 10%, blue 50%)1% 1;

При таком построении градиента не получается округлить, что сделать надо?

Answer 1

[3luyka]

К сожалению сделать закругление border-image невозможно.

Как вариант, можно блок с border-image обернуть в div, а div'у задать нужное округление и overflow: hidden;

Comments

[Игорь Касперский]

непонятно. Т.е. div дать радиус и оверфлоу?

Answer 2

[Капитан Какао]

Закруглить углы:
border-radius:20px;
Значения можно как в пикселях так и в процентах задавать. Можно задавать скругление отдельно стороне и даже половине угла.
jsfiddle.net/bmowdd3d/2

Comments

[Игорь Касперский]

https://jsfiddle.net/65xv7n4x/3/

[Игорь Касперский]

Тут другая тема)

[Капитан Какао]

Игорь Касперский: какая? Типа нужно скруглить углы картинки а не блока? или и блока и картинки?

[Игорь Касперский]

Rad Cor: Сделать border градиентным, ну как в примере, и округлить углы