"border-color"を "color"で上書きするのはなぜですか？

Question

私は次のCSSがあります：border-colorがcolor後に設定されているとして、いくつかの理由

.isActiveFilter { 
    color: black; 
    background-color: rgba(0, 184, 170, .5); 
    padding: 15px 10px 10px 10px; 
    border-color: red; 
    border: 3px solid; 
    border-radius: 5px; 
    cursor: pointer; 
    margin-left: 10px; 
} 

を、境界線の色は、私が期待されるだろうと赤、黒ではないとしてレンダリングされます。思考？

Answer 1

border: 3px solid red;へ色"？ ....境界線の色は、border-colorがcolorの後に設定されているため、予想どおりに赤ではなく黒くレンダリングされます。思考？あなたはborderを使用して、すべての境界線のプロパティの省略形を使用している

border-color: red; /* sets the border color to red */ 
border: 3px solid; /* sets the border color to default (black) */ 

、そしてあなたがborder内の任意の色を指定していないので：あなたの問題は、あなたのborder-プロパティを宣言した方法の範囲内にある

この場合はblackのas defined by the color property の既定の色に設定されています。border-colorの後にborderと宣言しているので、redをblackでオーバーライドしています。

単にborder CSSプロパティが速記プロパティです...

border-color: red;  /* <-- REMOVE THIS LINE */ 
border: 3px solid red; /* set the border color here */ 

---

"A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color)."

Answer 2

#works { 
 
    border: 3px solid; 
 
    border-color: red; 
 
    } 
 

 
#broken { 
 
    border-color: red; 
 
    border: 3px solid; 
 
    }

<p id="works">Some Text</p> 
 

 
<p id="broken">doesn't work</p>

置きボーダー後の色

border: 3px solid; 
border-color: red; 

他の回答には優れているが、これは私の側で働いていました。

Answer 3

borderの省略形の定義を使用しましたが、色を指定していないため、デフォルトは黒です。

border-color: red; 
border-width: 3px; 
border-style: solid 

か、単に適切に速記使用：あなたは2つのオプションがあり

border: 3px solid red; 

Answer 4

がborder-color: red;を削除してみて、変更をborder: 3px solid;「なぜ「ボーダーカラー」で上書きされ

Answer 5

をborder-colorを削除し、borderプロパティ内の任意の境界線の色を指定します... border-width,border-styleおよびborder-color ...ボーダーの色を示す<color>。設定されていない場合、そのデフォルト値は要素のcolorプロパティの値（背景色ではなくテキストの色）です。 - MDN

（色なし）border: 3px solid;ショートハンド、色はその要素のcolor値から継承されています。例1：

span { 
 
    color: blue; 
 
    border: 3px solid; 
 
}

<span>Text sample</span>

colorが要素の上に定義されていない場合、それは親にも未定義のだならば、それはブラウザのデフォルトにフォールバックされます、親要素にcolorを探します色はblackです。例2：

body { 
 
    color: green; 
 
} 
 
span { 
 
    border: 3px solid; 
 
}

<span>Text sample</span>

そして順序は次の順序でそれを設定した場合に予想されるように、それが動作する、重要。例3：

span { 
 
    border: 3px solid; /*first*/ 
 
    border-color: red; /*second*/ 
 
}

<span>Text sample</span>

しかし、完全なショートハンドセットを使用する方が簡単になります：（[MDN]によると

border: 3px solid red;