CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152697

How to make double lines border in CSS, each line in different color, without using background image?

How to make a double line border in CSS, each line in a different color without using background-image?

For example like this:

enter image description here

Code:

<h2> heading 2 </h2>
<p> paragraph text </p>

<h2> heading 2 </h2>
<p> paragraph text </p>

Note: I'm not considering IE 8, 7, 6

Upvotes: 29

Views: 98185

Answers (11)

methodofaction
methodofaction

Reputation: 72405

You can do it with the :after pseudo element:

http://jsfiddle.net/aCgAA/

h2 {
padding: 5px 0;
border-bottom: solid 3px pink;
font-weight: bold;
position: relative;
margin-bottom: 8px;
}

h2:after {
content: '';
border-bottom: solid 3px blue;
width: 100%;
position: absolute;
bottom: -6px;
left: 0;
}

This degrades gracefully to a single line if the :after selector is not available.

Upvotes: 16

Danield
Danield

Reputation: 125523

You could do it like this:

also see FIDDLE

h2 {
    border-bottom: 3px solid red;
}
p {
    border-top: 3px solid blue;
    margin-top: -20px;
    padding-top: 20px;
}

Upvotes: 0

Linearza
Linearza

Reputation: 51

Just had to do this, we're implementing a two-tone shadow in our app. Being an mobile app we want to avoid box-shadow (performance) so an even simpler solution using :after, where its absolutely positioned based on its parent is:

 :after{
   content: '';
   display: block;
   height:0;
   border-top: 1px solid rgba(0, 0, 0, .1);
   border-bottom: 2px solid rgba(0, 0, 0, .05);
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 100%;
 }

Upvotes: 0

vahanpwns
vahanpwns

Reputation: 963

Similar to what ADW said, in fact I'll edit his fiddle to help explain the difference.

In your description you explicitly described h2 followed by p should have the double border in between.

ADW's solution is good enough, only when there is only one p after the h2, but if there is another p, it will have a strange red line between the paragraphs. That's why we should only select the p which is immediately following a h2.

CSS selector for p immediately following h2 is h2 + p

Try this: http://jsfiddle.net/gR4qy/42/

h2 { border-bottom: solid pink;}
h2 + p { border-top: solid blue; }

This is nothing new. It's CSS 2.1! http://www.w3.org/TR/CSS2/selector.html

Unfortunately there's nothing I can think of to get rid of the blue border if the p is missing. You're on your own there :S

Sorry I have to get 50 points before I can comment and I dont know how to get points so I pposted this as a new answer :S

Upvotes: 1

xpredo
xpredo

Reputation: 1533

border-bottom: 1px solid blue;
box-shadow: 0 1px 0 red;

Upvotes: 6

wei
wei

Reputation: 162

Have you try add a <span> between <h2> and <p> with the following css:

span {
height:0;
border-top:blue;
border-bottom:#ff0000;
line-height:0;
}

Upvotes: 3

Jitendra Vyas
Jitendra Vyas

Reputation: 152697

I just found the way on google search and it's working good for me.

h2 {
    border-bottom: 1px solid blue;
    box-shadow: 0 1px 0 red;}

Source : http://www.cvwdesign.com/txp/article/425/useful-tip-for-creating-double-borders-with-css3

Edit : I found another way to achieve multiple border using CSS 2.1 pseudo-elements

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Upvotes: 61

Ariful Islam
Ariful Islam

Reputation: 7675

it is possible in CSS3 very easily. try with the following code

h2
{
  border-bottom: 2px solid blue;
  -moz-box-shadow: 0px 2px 0px #ff0000; /* Firefox 3.6 and earlier */
  -webkit-box-shadow: 0px 2px 0px #ff0000; /* Safari and Chrome */
  box-shadow: 0px 2px 0px #ff0000;
}

Upvotes: 7

Will Martin
Will Martin

Reputation: 4180

Just take away the margins between the items so that their borders fit right against one another. Here's a complete example -- size of the borders made large so it's easy to see.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<style type="text/css">
h2 { border-bottom: 10px solid blue; margin-bottom: 0; }
p { border-top: 10px solid green; margin-top: 0; }
</style>

</head>
<body>

<h2>Hiya</h2>
<p>La la la</p>

<h2>Hiya</h2>
<p>La la la</p>

</body>
</html>

Upvotes: 0

ADW
ADW

Reputation: 4080

h2 { border-bottom: solid blue;}
p { border-top: solid red; }

Will get you close, then play around with margins and padding until things line up.

http://jsfiddle.net/gR4qy/

Upvotes: 0

Pekka
Pekka

Reputation: 449495

I don't think there is a way to do this without an additional element.

There's outline, but it doesn't allow a outline-bottom rule: An outline can only be identical on all four sides.

The :after pseudo-class will allow the adding of text content only, no elements.

Here's how to do it with an additional hr.

Upvotes: 3

Related Questions