左下の境界

Question

想像（またはあなたが想像することができない場合は、見て）コードのこの作品：

<div class="block"></div> 
<style> 
    .block { 
    width: 10px; 
    height: 10px; 
    display: block; 
    background-color: red; 
    border: 1px solid #000000; 
    border-bottom: 0; 
} 
</style> 

は今すぐ下の行を見てください。これは私の問題です。私は左と右の境界線が1px長くなるようにします（下の境界線は左境界線と右境界線の間の部分です）。
これは可能ですか？

Answer 1

ボックスモデルが一つだけのdiv使用して、あなたが必要なものをサポートしていないので、これは、それを行うための方法です：

<div class="block"><div></div></div> 

とCSSを：

.block { 
    width: 10px; 
    height: 10px; 
    border: 1px solid #000000; 
    border-bottom: 0; 
    padding-bottom: 1px; 
} 

.block div { 
    width: 10px; 
    height: 10px; 
    background-color: red; 
} 

これは拡張します左と右の黒い枠線が1ピクセルで表示されます。

Answer 2

これを試してみてください:) http://jsfiddle.net/z6ASC/

Answer 3

あなたは二つの容器、外側の左/右の境界線に1つ、および内部の下ボーダーのための1つを持っている場合、これは可能です。私はこれを示すデモをまとめました。

DEMO： http://wecodesign.com/demos/stackoverflow-7074782.htm

<style type="text/css"> 
#borderOutside { 
    height: 200px; 
    width: 300px; 
    border:1px solid #900; 
    border-bottom: none;  
    padding-bottom: 5px; /*this is the gap at the bottom*/ 
} 
#borderInside { 
    height: 100%; 
    border-bottom: 1px solid #900; 
} 
</style> 
<div id="borderOutside"> 
    <div id="borderInside"><!--Your Content--></div> 
</div> 

Answer 4

それはこの戦略を経由してあなたのHTML内の任意の余分な要素を追加することなく行うことができます。

.block { 
    position: relative; 
    width: 10px; 
    height: 10px; 
    display: block; 
    background-color: red; 
} 

.block:before { 
    position: absolute;  
    content: ''; 
    width: 10px; 
    height: 11px; 
    top: -1px; 
    left: -1px; 
    border: 1px solid #000; 
    border-bottom: none; 
} 

擬似要素：前だけIE8からサポートされています他のすべての主要なブラウザで動作します。