How to make nice looking border as seen on mailchimp.com

HTML & CSS
1

Hey everyone,

I’d like to make a nice looking border for the bottom (blue) section on this page: http://omkara.x-gr.net/

My idea is to make it similar to the one you see on this page: http://mailchimp.com/

Do you see where the blue BG ends and the grey BG begins? That’s the effect I want. I tried using firebug but can’t figure it out…

Any suggestions are appreciated…thanks!

2

Usually this effect is made using a 1px wide gradient image and repeated throughout the X-axis (Repeat-x). Basically, you can use photoshop or any other design program for that matter to make this. Just make your background gradients, and when the two colors intersect, you create two 1px high borders. The first being white, and the second being black. This will give that effect you are looking for. You are going to need to possibly play around with the opacity and color to get the best looking result.

Also, if that is not an option, you could most likely get the same effect using the style sheets.

My best guess would be potentially something like this;


*bluebg div* {
border-bottom-style: solid;
border-color: #000000;
border-width: 1px;
}

*greybg div* {
border-top-style: solid;
border-color: #ffffff;
border-width: 1px;
}

Again, you would need to play around possibly with the colours. I’m not entirely sure the css portion would give the desired effects, but I can guarantee the background image gradient with borders, and repeat-X would, as I’ve used the same concept in sites in the past.

Hopefully that helps a bit,

Elementax

3

It does help a lot! Thanks, I’m going to give this a try…

C

4

All MailChimp is doing there is putting a 1px white border on the bottom of the header, which you can easily do yourself:


#section-footer {
  [COLOR="#0000FF"]border-bottom: 1px solid white;[/COLOR]
}