html5 - sombreado - ¿Es posible crear un borde de contorno con radio?

etiqueta border html

Question

Sabía que puedes agregar un borde de contorno con CSS3.

outline: 10px solid red;

Ahora me preguntaba cómo puedo agregar también un radio a ese borde de contorno.

He intentado este, pero no funciona:

.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;
}

Answer 1

@MichaelYaeger Respuesta similar a user1685185 pero con un JSFiddle actualizado, use border-radius y box-shadow . Este JS Fiddle se muestra usando un "borde" alrededor de un botón circular (bootstrap), pero lo mismo se aplica a una imagen, etc.

Answer 2

Intente utilizar la técnica de bordes infinitos de CSS-Tricks y aplicar border-radius .

Este método requerirá bordes y box-shadow y no contornos.

Aquí está el enlace de violín

Answer 3

Firefox tiene una propiedad -moz-outline-radius , sin embargo, la solicitud para implementar una función similar en WebKit se cerró como WONTFIX . El plan para el futuro es hacer que los perfiles sigan las fronteras .

Me doy cuenta de que esto no ayuda mucho, pero la respuesta a su pregunta es: actualmente, no (no de forma cruzada). Mientras tanto, debe utilizar un enfoque alternativo como el sugerido por thekalaban.