CSS：ベベルボーダーのグラデーション？

Question

私はCSSを使用して完全な斜角の枠線を作成しようとしています。

基本的には、境界を少し上げてグラデーションカラーを設定する必要があります。

私が持っている問題は、border-style:ridge;を使っていますが、私が見つけることができる最も近いものですが、色/グラデーションは実際には良くなく、ベベルスタイルもあまり良くありません。

明るい色と暗い色が一致するような半径の角に線があります。

これは作業FIDDLE

あり、この使用してCSSを行うに任意のより良い方法はありますか？

ご協力いただければ幸いです。

EDIT：

これは、CSSコードです：

.ttle{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    border: 4px solid #c2924e; 
    border-style: ridge; 
    width:100%; 
height:auto; 
padding:10px; 
min-height:150px; 
border-bottom-left-radius: 3em; 
border-top-right-radius: 3em; 
background-color:#000; 
position:relative; 
    } 

Answer 1

グラデーションボーダーをしたい場合は、外側のdivの内側のdiv要素と勾配の背景を使用してクリーンなボーダー効果を達成することができます。それはあなたに望ましい効果を与えるはずです。あなたがそこに行っている半径を念頭に置いて、内側の半径は "境界"の幅を一定に保つために少し小さくする必要があります。これは、ブラウザによって若干異なる場合があります。 Chrome & FF/Macでテスト済みです。

https://jsfiddle.net/treetop1500/nL4t9jLw/

.ttle { 
 
    background: red; 
 
    /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#c2924e, #7c5b2d); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#c2924e, #7c5b2d); 
 
    /* Standard syntax */ 
 
    width: 90%; 
 
    height: auto; 
 
    padding: 5px; 
 
    border-bottom-left-radius: 3em; 
 
    border-top-right-radius: 3em; 
 
    background-color: #000; 
 
} 
 
.inner { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border: none; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 10px; 
 
    min-height: 150px; 
 
    border-bottom-left-radius: 2.8em; 
 
    border-top-right-radius: 2.8em; 
 
    background-color: #000; 
 
}

<div class="ttle"> 
 
    <div class="inner"> 
 

 
    </div> 
 
</div>

Answer 2

<div class="title"> 
</div> 

.title { 
border:5px solid #FC0; 
display: inline-block; 
padding: .5em 2em .55em; 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
}