CODEWITHSUNDEEP
htmlcss
Tom Moore
Tom Moore

Reputation: 33

Border color to header without affect body

Check this fiddle

I want to know how can I add a border to header without affect the body or vice-versa. 

.content-box {
  border: 1px solid #cfcfcf;
  background: #ebebeb;
}

.content-box-header {
  background: #202020;
  color: #fff;
  padding: 5px;
}
<div id="content" style="max-width: 330px;">
  <div class="content-box">
    <div class="content-box-header">
      Chocolate Bar
    </div>
    <ul>
      <li>PHP</li>
      <li>HTML</li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 86

Answers (2)

Tom Esposito
Tom Esposito

Reputation: 165

I would break it up into more pieces. Below I broke it up into header, body, and the content box. From here, just assign one border to the body, and another to the header. Removing the border definition from the entire parent should fix it.

.cbox-body {
  background: #ebebeb;
  border: 1px solid #cfcfcf;
}
.content-box-header {
  background: #202020;
  border: 1px solid red;
  color: #fff;
  padding: 5px;
}
#content{
  max-width:330px;
}
<div id="content">
  <div class="content-box">
    <div class="content-box-header">
      <p>Chocolate Bar</p>
    </div>
    <div class="cbox-body">
      <ul>
        <li>PHP</li>
        <li>HTML</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

suketup
suketup

Reputation: 469

Just use the border for header class,

  .content-box {
      background: #ebebeb; 
      border: 1px solid #cfcfcf;
  }

  .content-box-header {
      border: 1px solid #colorcode;
      background: #202020;
      color: #fff;
      padding: 5px;
  }

I Hope it would help.

Upvotes: 0

Related Questions