Style an
tag to appear inset with appx default thickness (if able to style a
to achieve result that is okay!)

Question

I need for the <hr /> tag to appear inset for a site I'm working on, any idea's on achieving this? I was thinking style a div and give it box shadow, not sure if I'm getting off track or not.

@Layne I would say this is close to a duplicate of that question but my answer is a more current and flexible version if that matters :p — Josh Powell, Oct 24 '13 at 20:16

score 6 · Accepted Answer · answered Oct 24 '13 at 20:10

6

Here you go,

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

<span class="hr"></span>

By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.

answered Oct 24 '13 at 20:10

Josh Powell

6,219
5
31
59

To be honest, if dexoplex is truly only looking for a horizontal rule your solution is correct. If he intends to split a fixed layout with a hr I would suggest to use the possible duplication. I was expecting a response from him if that link is what he truly wanted. I'm also surprised that it got accepted or voted as duplication. Since it doesn't necessarily has to be one. – Oct 25 '13 at 15:29
Yeah I was a little surprised as well since they are indeed similar but could be different based on what he needs. I also added my answer to that page because of the flexibility my solution offers on multiple color backgrounds. It would be very helpful if he would just respond already and he does have the power to make it not a dup. :/ – Josh Powell Oct 25 '13 at 15:39

Style an tag to appear inset with appx default thickness (if able to style a to achieve result that is okay!)

1 Answers1

Style an
tag to appear inset with appx default thickness (if able to style a
to achieve result that is okay!)