半径でアウトラインボーダーを作成することはできますか？

Question

私は、CSS3でアウトラインボーダーを追加できることを知っていました。

outline: 10px solid red; 

ここで、その輪郭線にどのように半径を追加できるのだろうと思いました。

私はこの1つを試してみましたが、動作しません：

.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

Firefox has a property -moz-outline-radius、WebKitの中で同様の機能を実装するためしかし要求がclosed as WONTFIXました。将来の計画はmake the outlines follow the bordersです。

これはあまり役に立ちませんが、あなたの質問への答えは：現在、いいえ（クロスブラウザーではありません）です。その間に、あなたは、カラバンによって提案されたような別のアプローチを使うべきです。

Answer 2

はCSS-Tricks' Infinite Borders techniqueを使用してborder-radiusを適用してみます。

この方法では枠線が必要で、box-shadowでアウトラインではありません。

Here is the fiddle link

Answer 3

@MichaelYaegerユーザー1685185に似ていますが、更新されたJSFiddleと同様の回答は、border-radiusとbox-shadowを使用してください。このJS Fiddleは円形のボタン（ブートストラップ）の周りに "境界線"を使って表示されますが、イメージなども同じです。