borderの左側の色を変えたい

Question

前提・実現したいこと

画像の会社名の上のborderのようにその箇所だけ色を変えたいです。

該当のソースコード

ソースコード
html

<div class="c-box-inner">
      <dl id="company_1">
        <dt>会社名</dt>
        <dd>株式会社ルーしー</dd>
      </dl>
      <dl id="company_2">
        <dt>電話番号</dt>
        <dd>03-0000-0000</dd>
      </dl>
      <dl id="company_3">
        <dt>住所</dt>
        <dd>東京都港区なんちゃらかんちゃら</dd>
      </dl>
    </div>

css

.c-box-inner dl {
  width: 730px;
  display: flex;
  padding: 25px;

}
.c-box-inner dt {
  width: 120px;
}
.c-box-inner {
  padding:100px 0 0 100px;
}
#company_1, #company_3 {
  border-top: 1px solid rgb(219, 220, 221);
  border-bottom: 1px solid rgb(219, 220, 221);

試したこと

会社名の部分だけにpaddingやborderを指定したりいろいろやってみたのですが、コードがぐちゃぐちゃになっていったので、一番わかりやすいコードが知りたく投稿させて頂きました。

Comments

[kei344]

画像（イメージ説明）はコードブロックの外に出しましょう。

[hdo]

ありがとうございます！

Answer 1

会社名だけにborder-leftを設定。
dlのpaddingをdtとddに移して、#company_1 dtにborder-topを指定。色は好きに変えて下さい。

.c-box-inner dl {
    width: 730px;
    display: flex;
    
}
.c-box-inner dt {
    width: 120px;
    padding: 25px;
}

.c-box-inner dd {
      padding: 25px;
}

.c-box-inner {
    padding:100px 0 0 100px;
}

#company_1, #company_3 {
    border-top: 1px solid rgb(219, 220, 221);
    border-bottom: 1px solid rgb(219, 220, 221);
}
#company_1 dt {
    border-top: 1px solid red;
}

Comments

[hdo]

回答ありがとうございます、質問の仕方が悪かったです。
下の画像を上の画像のようにその箇所だけに色を付けたいのです...

[Daregada]

「その箇所」とはどこか、明確に説明して下さい。あなた以外の人には伝わっていません。

[hatena19]

タイトルが誤解を生みやすいですね。
「border-top の特定の箇所の色を変更したい」とかだと誤解なく伝わりそうです。

[Daregada]

「会社名のdtとddの上の枠線のうち、dtの上だけに色を付けたい」ということですかね。

[hdo]

ご指摘ありがとうございました。
そうゆう点も意識していきます！

[hatena19]

そうですね。そこまでやりたいことが分析できていれば、あとはコード化はほぼできたも同然ですね。

[hdo]

そうですね。質問になるべく不足が無いようにしていきます！

[hdo]

具体性が大事なのですね、参考になります。

Answer 2

下記でどうですか。

dl のpaddingを削除して、代わりにdt dd にpaddingを追加。
#company_1 dt の border-top を設定。

.c-box-inner dl {
  width: 730px;
  display: flex;
/* padding: 25px; 削除*/
}
.c-box-inner dt {
  width: 120px;
  padding: 25px 0 25px 25px; /*追加*/
}

/*ここから*/
.c-box-inner dd {
  padding: 25px 25px 25px 0;
}
/*ここまで追加*/

.c-box-inner {
  padding:100px 0 0 100px;
}
#company_1, #company_3 {
  border-top: 1px solid rgb(219, 220, 221);
  border-bottom: 1px solid rgb(219, 220, 221);
}

/*以下追加*/
#company_1 dt {
  border-top: 2px solid rgb(83 183 162);
}

CodePenサンプル

Comments

[hdo]

コードも簡潔でうまくいきました！
ありがとうございます。