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

Question

[kirillleogky]

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

В такое:

Comments

[origami1024]

Можешь формулой описать как твоя рамка скруглена?
И еще интересно где будет применено.

[kirillleogky]

origami1024,
вот

[origami1024]

kirillleogky, оно хорошо гуглится по "CSS Corner smoothing"

Answer 1

[RAX7]

border-image + svg

скругления срисованы отсюда https://habr.com/ru/post/353082/

Comments

[kirillleogky]

RAX7 без svg и border-image можно ли?

[RAX7]

kirillleogky, это самый простой вариант, можно еще сделать так https://codepen.io/cp/pen/NmwzVQ или использовать https://css-houdini.rocks/smooth-corners/ , но css houdini еще плохо поддерживается https://caniuse.com/#feat=css-paint-api

[kirillleogky]

RAX7, правильно ли я понял
взять просто фон, его в svg и на border-image?

[RAX7]

kirillleogky, нет, посмотри здесь css.yoksel.ru/border-image как правильно подготовить картинку для border-image, конвертировать svg в data-url можно тут https://yoksel.github.io/url-encoder/