Question 55704 in CSS Question posted in
Some basic documentation can be found here.

Create a horizontal line 2px height – with 2 different colors – CSS

I want to create the effect of a single horizontal line that is 2 px high. Essentially two single pixel height lines sandwiched together. With each line being different colors.

So the first line (single pixel height) would blue. The second single pixel line directly underneath with no spacing, would be red.

Not sure if this can be achieved using <HR> or whether it would need to be a div with borders?

Any assistance greatly appreciated.

Haven’t really found anything that works yet.

Tags:

2

Answers


  1. 0

    Assuming this needs to be done at the bottom of a div without any additional DOM elements, you can achieve it using box-shadow. (However, the second line in red will not be occupying any space thus you might need to add a margin-bottom to compensate it)

    Although it is named as box-shadow, when it is used without a blur / spread parameter, it looks exactly like a solid line / block.

    div {
  border-bottom: 1px solid blue;
  box-shadow: 0 1px red;
}
    <div>Hello</div>
    Login or Signup to reply.
  2. 0

    <hr> is just a normal block element, which means we can style it using border-* properties:

    hr {
  border-top: 1px solid blue;
  border-bottom: 1px solid red;
}
    <hr>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search