CODEWITHSUNDEEP
htmlcssborder
ANTLER66
ANTLER66

Reputation: 81

How to create a double bottom border in CSS

I want to create a double boarder at the bottom of a title with two lines of different thicknesses and a 1px space in between. Specifically a top line with a thickness of 2px and a bottom line of 1px.

Here is an image example of what I am aiming to achieve aesthetically -

enter image description here

Other website which have used this design aspect - http://www.rollingstone.com/

So far I have tried - "border-bottom: 1px Solid #000;" with no luck. I would appreciate any further suggestions

Many Thanks

Upvotes: 8

Views: 45728

Answers (9)

Elliot
Elliot

Reputation: 1

I found the best way of doing this is with a 

<hr>

If you apply a class to it i.e:

<hr class="double">

And then CSS like so:

.double { 
  height: 3px; 
  border-top: 3px solid #ccc; 
  border-bottom: 1px solid #ccc; 
}

It will give you the desired effect. Hope this helps anyone still looking.

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39392

Here are a couple of other possibilities:

Approach #01:

We can use linear-gradient() to fill background of the heading with a combination of transparent and solid color like black so that it looks like an outline.

Necessary CSS:

.heading {
  /* Make heading inline-block so that its width becomes dependent on content. 
     Ohterwise heading will take full available width as it is a block element. */
  display: inline-block;
  vertical-align: top;

  // Draws the outer (thin) border...
  border-bottom: 1px solid black;

  // Draws the inner (thick) border...
  background: linear-gradient(to top, transparent 3px, black 3px,
                                      black 6px, transparent 6px) no-repeat;
}

Working Example:

.heading {
  background: linear-gradient(to top, transparent 3px, black 3px, black 6px, transparent 6px) no-repeat;
  
  border-bottom: 1px solid black;

  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}
<h1 class="heading">Title Here</h1>

Approach #02:

  1. Draw the outer (thin) outline with CSS border-bottom property.
  2. Create an image with CSS linear-gradient() function that looks like a border.
  3. With background-size CSS property control its size.
  4. Place it at the required position with background-position property.

Necessary CSS:

.heading {
  // Draws the outer (thin) border...
  border-bottom: 1px solid black;

  // Draws the inner (thick) border...
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 100% 3px;  // Increase / Decrease 2nd value will change height of image
  background-position: left bottom 3px;
}

Working Example:

.heading {
  background-image: linear-gradient(black, black);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: left bottom 3px;
  
  border-bottom: 1px solid black;

  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
}
<h1 class="heading">Title Here</h1>

Screenshot:

Heading with double bottom borders

Useful Resources:

Upvotes: 1

Jonathan
Jonathan

Reputation: 31

Another option is to use a combination of border and some box-shadow trickery. Check it:

h1 {
  border-bottom: 4px solid black;
  box-shadow: 0px 3px 0px 0px white, 0px 4px 0px 0px black;
}

WORKING DEMO: http://codepen.io/jonathanhigley/pen/GpqMEm

Upvotes: 0

gherkins
gherkins

Reputation: 14985

You could do something like this, as it requires no extra markup.

http://jsfiddle.net/aNc9X/

enter image description here

as seen here: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

Upvotes: 14

The Alpha
The Alpha

Reputation: 146269

Try this CSS

.title{
    font-size:35px;
    font-weight:bold;
    border-bottom:1px solid #000;
}
.title span{
    margin-bottom:4px;
    display:block;
    border-bottom:5px solid #000;
}

HTML

<div class='title'>
    Title Here
<span class='border'></span>
<div>​

DEMO.

Upvotes: 1

Jonathan Garner
Jonathan Garner

Reputation: 216

@Spudley - I wasn't aware of 'double' value for borders, that useful but doesn't give the thicker upper line.

Martin's answer is better than my initial answer (now edited) as it doesn't use an extra div, but you can use his technique without having to use an image like so (this is amended code from Martin's fiddle):

<h1><span>Hello World!</span></h1>​

h1 {font-size: 40px;
border-bottom: solid 2px black;
display: inline-block;}

h1 span{
border-bottom:solid 1px black;
padding: 3px;
}​

jsfiddle here

By the way, the rollingstone site uses mainly images of double-lined borders, not actual css. I'm sure you are aware, but you can right-click and choose Inspect element from your web-browser to explore how a site has been built. Best way to learn!

Upvotes: 0

Spudley
Spudley

Reputation: 168853

Two problems:

  1. You need to specify double rather than solid.
  2. You need to specify 3px rather than 1px. (one pixel isn't enough to display a double border plus a gap between them)

Your final code would look like this:

border-bottom: 3px double #000;

See also : http://jsfiddle.net/qRUwk/

Standard CSS can't display the two borders at different thicknesses though. For that, you need to have additional markup. There are hacks that can do it with before: and after: styles, but they get quite complex.

Upvotes: 1

Martin Schaer
Martin Schaer

Reputation: 4006

Here's the solution usign the background image used in RollingStone.com

h1{font-size:40px;}
h1 span{
    background: transparent url(http://assets.rollingstone.com/images/fe/layout/oxfordLine.gif) scroll repeat-x bottom left;
    padding: 0 0 8px;
}​

Adjust the padding as needed.

Live demo: http://jsfiddle.net/martinschaer/aQq96/

Upvotes: 0

hagope
hagope

Reputation: 5531

Try creating these key lines with div's and border-bottom, check this out:

http://jsfiddle.net/R2puF/

.divA{
  height: 1px;
  border-bottom: 2px solid black;
}
.divB{
  height: 1px;
  border-bottom: 1px solid black;
}​

Then your HTML: 

<h1>Title Here</h1>
<div class="divA"></div>
<div class="divB"></div>​

Upvotes: 1

Related Questions