CSS3でボーダー半径をインセット

Question

css3でインセットボーダー半径を作成する方法はありますか？

（画像なし）私はこのような境界線の半径を必要とする：

Answer 1

すべてのCSSとHTML（画像などはありません）でこれを達成するための最良の方法は、Lea Verou氏によるusing CSS3 gradientsです。彼女の解から：

div.round { 
    background: 
     -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background-position: bottom left, bottom right, top right, top left; 
     -moz-background-size: 50% 50%; 
     -webkit-background-size: 50% 50%; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
} 

結果は、カーブ付きの透明グラデーションのセットです。デモ用の完全なJSFiddleを見て、見た目を変えて遊びましょう。

明らかにこれはrgbaとgradientのサポートに依存しているため、プログレッシブエンハンスメントとして扱う必要があります。また、デザインにとって不可欠な場合は、古いブラウザ（特にIEでは、 IE9経由でもgradientをサポートしています）。

Answer 2

ことが可能だようにそれは見ていません。私は何が起こるかを見るために負の値でボーダー半径を試しましたが効果はありませんでした。

編集：あなたは小さな部分にダウンボックスを破る

場合であっても、いくつかの点であなたはまだ透明はめ込みコーナーを作成する必要があると思います。透明性は、画像なしでこれが可能になるのを防ぐかもしれないトリッキーな部分です。基本的には、透明でない周囲のbgで透明な円をレンダリングする必要があります（CSSで可能な場合は、どうすればいいか分かります:)

透過性が必要ない場合は、それを行う方法があります。

Answer 3

コーナーが透明でなければならないとは思っていませんが、背景が分かっていれば、丸みのあるボーダーで各コーナーにdivを作成できます。それらのdivにページの背景と同じ背景色が与えられれば、その効果が働きます。

ここに私の例を参照してくださいhttp://jsfiddle.net/TdDtX/

#box { 
 
    position: relative; 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #333; 
 
} 
 

 
.corner { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    border: 1px solid #333; 
 
    background-color: #fff; 
 
} 
 

 
.top-left { 
 
    top: -1px; 
 
    left: -1px; 
 
    border-radius: 0 0 100% 0; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.top-right { 
 
    top: -1px; 
 
    left: 190px; 
 
    border-radius: 0 0 0 100%; 
 
    border-width: 0 0 1px 1px; 
 
} 
 

 
.bottom-left { 
 
    top: 90px; 
 
    left: -1px; 
 
    border-radius: 0 100% 0 0; 
 
    border-width: 1px 1px 0 0; 
 
} 
 

 
.bottom-right { 
 
    top: 90px; 
 
    left: 190px; 
 
    border-radius: 100% 0 0 0; 
 
    border-width: 1px 0 0 1px; 
 
}

<div id="box"> 
 
    <div class="corner top-left"></div> 
 
    <div class="corner top-right"></div> 
 
    <div class="corner bottom-left"></div> 
 
    <div class="corner bottom-right"></div> 
 
</div>

Answer 4

あなたは（まあ、それはイメージのだが、それは問題なくスケール）新しいCSS3ボーダー-イメージでこの効果を達成できます。しかし、これは全く新しく、あまり広くはサポートされていません（IE以外のすべてのまともなブラウザ（接頭辞付き）でも）。

ボーダー画像についての素敵な記事csstricksです。

Browser Support

Answer 5

うーん、あなたはおそらく、あなたは、おそらくの間に他のブロックを追加する必要があります透明性をサポートするために、次にInset Border Radius

を作成するためにここにこの小さなトリックを利用することができます。多かれ少なかれ、古い丸い画像を使っていた方法に似ています。透明な画像を持つすべてのコーナーのスパンを持っています。空きスペースを埋めるために、側面と上部に広がっています。イメージを使用する代わりに、CSSでこのトリックを使用することができます。

Answer 6

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>

例：http://jsfiddle.net/dVmX3/

Answer 7

あなたは絶対に箱の影にコーナーで透明の円要素を配置することによって、これを達成することができます。スパン、ボックスシャドウ、ボーダー、擬似セレクタを含む隠れたオーバーフローdivの組み合わせを使用しました。

私のexampleをチェックしてください。

これはあなたが始めるために必要な基本的なHTMLとCSSです：ちょうど確認するために

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} 
 

 
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} 
 
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} 
 

 
a div:first-of-type {left: -14px;} 
 
a div:first-of-type:after {left:0;} 
 

 
a div:last-of-type {right: -14px;} 
 
a div:last-of-type:after {right:0;} 
 

 
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} 
 

 
a div:first-of-type span {left:-20px;} 
 
a div:first-of-type span:first-child {top:-20px;} 
 
a div:first-of-type span:last-child {bottom:-20px;} 
 

 
a div:last-of-type span {right:-20px;} 
 
a div:last-of-type span:first-child {top:-20px;} 
 
a div:last-of-type span:last-child {bottom:-20px;}

<a href=""> 
 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 

 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</a>

Answer 8

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>