CSS border-color| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

border-color CSS プロパティとは

トピック:border-color CSSプロパティは、個々の境界カラープロパティ border-top-color, border-right-color, border-bottom-color, border-left-colorを1つの宣言で設定するための簡略化されたプロパティ

プロパティ border-color

実例 コード 1

サンプル コードを試す
  • p {
  •     border-style: solid;
  •     border-color: #ff0000;
  • }

プロパティ 定義と使用法

デフォルト値・初期値 :以下の一括指定の各プロパティとして
適用対象 :全要素。 ::first-letter にも適用されます。
継承 :不可
メディア :visual
計算値 :以下の一括指定の各プロパティとして
CSS Version CSS1 ~
アニメーションの種類 :以下の一括指定の各プロパティとして
JavaScript 構文 object.style.borderColor="#FF0000 blue"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文border-color: color |transparent |initial |inherit;
    border-color プロパティは1つ、2つ、3つ、4つの値を使って指定することができる:
    • 値が1つ指定された場合、全4辺に同じ色が適用される。
    • 値が2つ指定された場合、1つ目の色は上下、2つ目は左右の辺に適用される。
    • 値が3つ指定された場合、1つ目の色上、2つ目は左右、3つ目は下の辺に適用される。
    • 値が4つ指定された場合、それぞれ上、右、下、左の順(時計回り)に適用される。

プロパティ値

説明
color背景色を指定する 可能なカラー値の完全なリストについては、「CSSカラー値」を参照 デフォルトの色は黒です
transparent境界線の色を透明にすることを指定する
initialこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
border-colorChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯3.5フルサポート◯1

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
border-colorAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯4 不明フルサポート◯ありフルサポート◯4フルサポート◯11フルサポート◯1 不明
border-color 関連記事
CSS border-color| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS border-color | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS