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 -

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

回答1:

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

http://jsfiddle.net/aNc9X/

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

回答2:

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.

回答3:

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>​

回答4:

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/

回答5:

@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!

回答6:

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.

回答7:

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

回答8:

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:

---

Useful Resources:

• Specification
• MDN
• CSS Tricks Tutorial

回答9:

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.