Можно ли создать контурную границу с радиусом?

Я знаю, что вы можете добавить контурную границу с 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;    
}

Ответы

Ответ 1

Firefox имеет свойство -moz-outline-radius, однако запрос на реализацию подобной функции в WebKit был закрыт как WONTFIX. План на будущее - чтобы контуры следовать за границами.

Я понимаю, что это мало помогает, но ответ на ваш вопрос: в настоящее время нет (не в браузере). Тем временем вы должны использовать альтернативный подход, подобный тому, который предложен thekalaban.

Ответ 2

Попробуйте использовать метод бесконечных границ CSS-трюков и применяя border-radius.

Для этого метода потребуются границы и box-shadow, а не контур.

Вот ссылка на скрипку

Ответ 3

@MichaelYaeger Аналогичный ответ пользователю1685185, но с обновленным JSFiddle используйте border-radius и box-shadow. Этот скрипт JS показан с использованием "границы" вокруг круговой кнопки (бутстрап), но то же самое относится к изображению и т.д.