Я знаю, что вы можете добавить контурную границу с CSS3.
outline: 10px solid red;
Теперь мне было интересно, как я могу добавить радиус этой границы контура.
Я пробовал этот, но не работает:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Firefox имеет свойство -moz-outline-radius, однако запрос на реализацию подобной функции в WebKit был закрыт как WONTFIX. План на будущее - чтобы контуры следовать за границами.
Я понимаю, что это мало помогает, но ответ на ваш вопрос: в настоящее время нет (не в браузере). Тем временем вы должны использовать альтернативный подход, подобный тому, который предложен thekalaban.
Попробуйте использовать метод бесконечных границ CSS-трюков и применяя border-radius.
Для этого метода потребуются границы и box-shadow, а не контур.
@MichaelYaeger Аналогичный ответ пользователю1685185, но с обновленным JSFiddle используйте border-radius и box-shadow. Этот скрипт JS показан с использованием "границы" вокруг круговой кнопки (бутстрап), но то же самое относится к изображению и т.д.