Divの境界線が「尖った」エッジを持っているようです

Question

div境界の「鋭い」エッジがあるように見えました。このための可能な回避策ことができるもの

.stat-table .stat-box.box-default{ 
    border-top: 5px solid black; 
} 

：私は、この宣言を持っていますか？おかげ

Answer 1

要素がすべての辺に異なる太さの罫線を持つためです（コードを付けることなく）。

境界線は、常に角度で一致します。example in this fiddle。

上の境界を角度なしにできるようにするには、divを使用して上の境界をシミュレートして、ちょっと傾ける必要があります。まず、親要素を作成することができます：

.fake-border { 
    /* making it absolute lets us position it freely 
    inside its relative (of fixed or absolute) parent */ 
    position: absolute; 

    /* this is technically the "width" of the border */ 
    height: 5px; 
    background-color: black; 

    /* positioning 0px from top */ 
    top: 0; 

    /* this one is a little tricky, we have to position 
    these values to the negative width of the parents 
    border, so assuming the border of .the-element-that-needs-a-border 
    is 3px we set this accordingly */ 
    left: -3px; 
    right: -3px; 
} 

もう一度、heres a fiddle to play around with! :)

希望に役立ちます。この親要素で

.the-element-that-needs-a-border { 
    position: relative; 
    /* (or absolute or fixed depending 
    on the needs of your layout) */ 
} 

は、私たちは、空のdivとスタイル、それを作成します！

Answer 2

border-radius: 1px;

すなわち

.stat-table .stat-box.box-default{ 
    border-top: 5px solid black; 
    border-radius: 1px; 
} 

またはあなたが好きな金額にborder-radiusを設定することができます。 uは異なるコーナーこれを使用時に異なる角度の境界線を持つようにしたい場合は https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Answer 3

：あなたは、ほぼ円形のようなことにそれをしたい場合は、border-radius: 50%

チェックアウトこのリンクを行います。左上、右上、右下、左下の順に割り当てられます。

.stat-table .stat-box.box-default{ border-top: 5px solid black; border-radius: 1px 2px 3px 4px; }

これはまた、ソリッドカラーであり、唯一のY軸上のオフセットボックスシャドウ可能性があり、ここでhttps://jsfiddle.net/Altair827/cffxs7g0/

Answer 4

それをチェック。マークアップなしで見たのが難しいですが、そうかもしれません。要素のCSSを調べ、ボックスシャドウがあるかどうかを確認します。