CODEWITHSUNDEEP
css
ScottD
ScottD

Reputation: 582

DIV border-bottom-color property two colors

I have a div, which contains a site header. The div has a border-bottom-color: #ff6600; which creates an orange line stretching across the width of the div. I'm looking to see if it's possible to set a start/end point on the border-bottom-color property so it has an appearance of starting and ending indented from the far margin of the div?

Here is a screenshot of what I'm looking for:

image illustrating the request

Upvotes: 0

Views: 745

Answers (2)

Kamikaza
Kamikaza

Reputation: 635

you can for example by adding a div inside a div. The first div without borders and the inner div with border. example

<div style="width:200px;height:100px; border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:0px solid #000000; margin-left:10px;margin-right:10px;">


    <div style="width:180px;height:100px; border-left:0px solid #000000;border-right:0px solid #000000;border-top:0px solid #000000;border-bottom:1px solid red; margin-left:10px;margin-right:10px;"></div>


</div>

I created a demo fiddle just for you

https://jsfiddle.net/wgrLfxg3/9/

Upvotes: 1

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

You can use pseudo element instead of border.

div{
  width: 100px;
  height: 40px;
  background: lightgrey;
  position: relative;
}

div:after{
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -45%;
  background: orange;
}
<div></div>

Upvotes: 1

Related Questions