How to Create Diagonal Lines with CSS
videos

How to Create Diagonal Lines with CSS

on Jun 30th 2011 with 79 comments
Tutorial Details
    • Subject - CSS
    • Difficulty - Beginner/Intermediate

Final Product What You'll Be Creating

Demo View It Online

A few days ago, I received my invite to Google Music. While browsing the app, I noticed a tiny, but neat trick they use to create tabs and diagonal borders with plain-old CSS. I’ll show you how to do the same in your projects today!

Prefer a Video Tutorial?

Choose 720p for the best clarity.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Step 1: The Markup

We begin with some simple markup.


<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <title>Demo</title> 
</head> 
<body> 
	<a href="#">New Music</a> 
	<div> 
		<h3> Hello, Everyone! </h3> 
		<p> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p> 
	</div> 
</body> 
</html>

We’ll keep this demo as simple as we possibly can.

bare markup

Step 2

Next, only for the layout, let’s apply a background color and a bit of spacing to the body element.

body {
	background: #e3e3e3;
	font-family: sans-serif;
	width: 400px;
	margin: 100px auto;
}
Spacing

Step 3

Now, we’ll style the anchor tag somewhat — apply a new color, make it bold, add some borders, etc.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
}
Style the anchor tag

Notice how, when you set large border widths, at the point the two intersect, it creates a diagonal line? I wonder if we can use that intersection as a tab edge? Let’s try reducing the height to zero.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

   height: 0;
}
Zero height

Getting closer! Maybe if we now adjust the line-height of the anchor tag, we can make the text fit into that box!

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}
Adjusting the line height

Step 4

We’re getting there! But, certainly, we don’t need that ugly red border on the right. Is there a way to specify that it should receive the body‘s background color without restating the hex value? Yep! We use the transparent keyword for this purpose.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}
Transparent Borders

Step 5

The obvious issue, at this point, is that it looks a bit odd, when the background stretches for the entire width of the container. The natural instinct might be to update the display to inline. However, as the image below shows, that won’t work.

display inline

We need the element to retain its block-like nature in order for it to honor the 0 height. The answer to this dilemma is to use display: inline-block;, or to float the anchor tag, and then clear the elements that follow it. We’ll use the former.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Much better!

Step 6

Lastly, let’s style the div below it a bit, and we’ll be just about finished!

div {
	 border: 1px solid #4c4c4c;	
	 border-top: 3px solid #4c4c4c;	   	 
	 padding: 20px;
}
Uh oh

In Safari

In Firefox

Uh oh. We have a problem. It looks like Firefox and Webkit don’t exactly agree on how to render elements with zero heights and displays of inline-block.

On a casual note, this one had me a bit stumped. Without resorting to hacks, I couldn’t get Firefox and Chrome to render the layout exactly. If you find a way, let me know in the comments! Update – refer to the comments for a work-around.

Step 7

There are ways to target Webkit browsers with CSS, but it’s important for me to note that tricks like this should only be used in situations of last resort. In other words, don’t try this at home kiddos (unless you have to). In our situation, it appears that it would be smarter to use floats to accomplish this layout. Nonetheless, let’s be dangerous and experiment with some alternate techniques.

Many aren’t aware that media queries can be used to target Webkit browsers. Watch what happens when we use a webkit-specific property as the condition for the media query…

@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

Ta da! It works. Remember though – only reach for this trick if you have no other option!

Final Product

Final Product

It’s a simple enough technique, but, nonetheless, one we should all have in our tool belts. Have you used any neat tricks like this in your projects? Let me know in the comments!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://blog.lastrose.com LastRose

    this works in chrome, hack free. float the “a” and display:block it, and add clear:both to the div.

    body {
    background: #e3e3e3;
    font-family: sans-serif;
    width: 400px;
    margin: 100px auto;
    }

    a {
    padding:10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 0 black;
    line-height: 56px;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #4c4c4c;
    height: 0;
    display: block;
    float:left;
    }

    div {
    clear:both;
    border: 1px solid #4c4c4c;
    border-top: 3px solid #4c4c4c;
    padding: 20px;
    }

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Ahh – nice one!

    • http://blog.arunace.com Arun Sengupta

      That was simple and cool :) Even I was trying to find out ways to not to use any kinda hacks.
      Thanks.

  • http://www.lucasdelrio.com.ar Lucas del Río

    I found this CSS tricks pretty advance but they are awesome! is it worth it so much code in a website to create a shape? when it could be achieved with a background image..
    I really want to know, I’m not that advanced with CSS and sometimes trying to do things like this seems impossible when they can be easily achieved like in “the old days” I would say =)
    Worth it or not, this was a great article!!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s really not that much code. Assign it to a class, and you never have to write it again. :)

    • http://rommelcastro.me Rommel Castro A.

      when i use things like this, what i do is , i create a section on my stylesheet name /* ELEMENTS */
      so i add all css elemntes in here, later i just add the class to each html element :)

    • Jason

      Also worth noting that even though it’s a few more lines of code, there are fewer resource requests by using pure CSS, and the file size of even a simple image such as the one that would replace this effect would be a larger than the bytes taken by adding a couple extra lines of CSS

      • http://gnarmedia.com Adam Murphy

        Not to mention that this allows you to change that border-bottom property without having to have another image of that color, you could easily make this work with a pseudo class of :hover and it would even have a highlight effect then, without any images, also the background would show through too, this is in my opinion, a better method, even with and image the same file size.

    • w1sh

      I wonder about this too sometimes. The amount of CSS used to create things like buttons or gradients can get pretty big. I’m sure it’s not as much as an image, but for the amount of work you put into something… nevermind, CSS is better, I’m just too lazy to learn this right now.

      I -would- be interested in some more Django.

      And whats the word on CMSTuts as opposed to WPTuts? Still think that’s a great idea.

      And as long as I’m not being heard, how about CSS things for design elements and web-roundups go over to webdesign.tutsplus?

      Seems like Nettuts is getting weighed down by a lot of net-related stuff, whereas I feel it should be focused more on programming for the web.

      We’re growing up Jeff. You’ve taught us well, but now we’d like to get into some more in-depth language stuff, frameworks, etc. And as Envato makes more of these sites, there seem to be perfect niches for a lot of content here (web roundups to webdesign, Drupal stuff to CMStuts, etc.).

      Much respect for everything you guys do, I just don’t feel like I’m alone in saying that I’d prefer to see Nettuts get back to the nitty gritty web programming stuff like all the “From Scratch” series – particularly Python/Django. ;)

      blah blah blah blah blah

      • DED

        I’m also a big Python fan. I would like to see more programming as well. Django would be great, especially a Django from scratch series.
        Otherwise this is a good tutorial. But I thought it was going to be about creating diagonal backgrounds with CSS3 as in striped backgrounds.

      • http://elgard-et-elgard.com/ Laue

        Less http headers too!
        You download the css anyway, not the image, this is not only a filesize matter :)

    • http://www.venture-ware.com/kevin/ Kevin Jensen

      I think the image vs. css is purely situational. With something this small, you really could go either way, because you’re probably going to be under 1/2KB both ways. However, I have to agree, it may be worth the bandwidth in http headers and requests to just do css. /shrug

    • Sabrina

      I think it’s also worth it because in production, updates are easier to implement when you use CSS, I’d rather change a hex code than have to create a new image ^_^

      • Samuel

        Yeah lets try as much as we can to minimise the photoshop use. not that i ming designing but the more code you write as opposed to creating images the better.

    • http://edwinhollen.com edwinhollen

      Granted, a dozen lines of code will always be smaller in file size than an image. If it can be accomplished in CSS and it works in modern browsers, there’s no reason to use an image. Images in place of code are for lazy developers!

  • Caio

    Hi Jeffrey,

    I have 2 questions:

    - Which theme is that you are using on Espresso?

    - How did u split the tabs?

    BTW, awesome tutorial. Nice effect, already included a snippet with it.

    • http://www.jathu.me Jathu

      Yes, the theme seems absolutely beautiful and easy on the eyes. Would love to know where I can get it:)

    • http://www.jathu.me Jathu

      Hey if you still need that theme here it is: http://fileability.net/coffee
      This website also has a lot more themes to choose from. Enjoy ;)

  • James

    The solution for fixing the margin: -4px; is quite easy. Just reset all browsers by forcing margin and padding to be 0. Something like: * { margin:0;padding:0;} that should do the trick.

    • Collin

      Thanks! This just solved a problem for another project I’ve been having issues with!

    • http://gnarmedia.com Adam Murphy

      Yea, a css reset is manditory anyhow, should be fixed by than, no problem, good call.

  • http://twitter.com/mishunov Denys Mishunov

    I think I have more elegant and flexible solutuion for this. Problem with the border is — it’s not flexible. You can have only 45º angles with it. Moreover to me it feels too massive to use border for this. I suggest to use generated content instead. This feels better since the diagonal is not really an element or anything meaningful, so generated content suits this idea better than the border in my opinion.

    and elements remain being styled as they are in the tutorial. What we change is the styling for the anchor element. The snippet below shows how I do that with the comment for the major changes.

    a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 10px; /* to better match the original design */

    padding: 10px 40px 10px 10px; /* we give more space on the right to fit the diagonal */
    background: #4c4c4c; /* we set the background */
    overflow: hidden; /* we want the corner with the diagonal to sit “within” the link */
    position: relative; /* in order to position the corner without influencing the flow */

    }
    a:after {
    content: ” “;
    display: block;
    position: absolute;
    width:0;
    height:0;
    /*
    30px below are based on the following calculations:
    10px top padding + 10px bottom padding + 10px line-height
    */
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #e3e3e3;
    border-bottom: 0;
    top: 0px;
    right: -30px;
    }

    What do you think?

    • http://twitter.com/mishunov Denys Mishunov

      Forgot to mention, that flexibility of the solution I suggest above, is that you can change the angle of the diagonal by simply increasing/decreasing width of border-top for a:content {}. Though, when one has high contrast between the link’s background and the body background, such diagonal might turn out quite harsh.

    • http://hito.fr hito

      Yea I agree with you and i use this solution too.
      I don’t know if the original trick on this post works on IE.
      The bad point is that the :after solution doesn’t work on IE and i haven’t found a solution yet to solve this…
      Any idea ?

  • Levi Voorintholt

    After a quick search around I found this too: http://stackoverflow.com/questions/4481860/inline-block-css-issue-in-webkit
    Basically add vertical-align:top; and you’re done. Looks okay in both chrome and firefox. haven’t tested any others as it was just a quick search.

    Also this way you don’t have to deal with any float’s messing up you’re layout if the browser get’s too small.

    Just my (and googles ;) ) 2 cents.

    Great tip for the rest! Thanks.

  • http://joshriser.com Josh

    Very cool effect! I definitely will use this in a design sometime!

  • Brad

    Excellent tut. CSS is so amazing!

  • DJ

    Clever. Are you deliberately leaving out mentioning IE? For what it’s worth to you – your demo works great in IE 9, without ANY hacks. I notice when you (or any author) seem to leave out IE because over 85% of visitors to my particular site use IE — can’t ignore it.

    • Robert

      Works great even in IE8 and IE7 ;-)

      • anon

        Great to know that this works in IE as well, I think I’m going to use this in future projects. Of course, if I can and if it fits in the design.

    • w1sh

      What the hell is IE?

      • Samuel

        “internet explorer browser” dude. Most of us beef with it on principal especially after a client re-installs their OS with the default IE6, access their site & immediately call you complaining over how it looks.

  • Brock Nunn

    Jeffrey, great tut sir. I immediately went and tried it for myself and really learned something.

    Thank you!

  • http://aeroggio.com Armando

    Could be line breaks in your markup.

    Regarding the extra space issue you mentioned, there have been a few nice suggestions. May I add one more?

    Recently, I had a project wherein webkit was rendering a few extra pixels between two list items that were displayed as an inline-block. The HTML looked like this:

    <ul&rt;
    <li&rt;A</li&rt;
    <li&rt;B</li&rt;
    </ul&rt;

    But when I changed the HTML to the following the extra spaces went away.

    <ul&rt;
    <li&rt;A</li&rt;<li&rt;B</li&rt;
    </ul&rt;

  • http://aeroggio.com Armando

    Could be line breaks in your markup.

    Regarding the extra space issue you mentioned, there have been a few nice suggestions. May I add one more?

    Recently, I had a project wherein webkit was rendering a few extra pixels between two list items that were displayed as an inline-block. The HTML looked like this:

    <ul>
    <li>A</li>
    <li>B</li>
    </ul>

    But when I changed the HTML to the following the extra spaces went away.

    <ul>
    <li>A</li><li>B</li>
    </ul>

  • Arun Mariappan K

    Nice Tutorial. I Like this trick… Many Thanks… :)

  • Arun Mariappan K

    Nice Tuts. I Like this Trick… Many Thanks… :)

  • http://www.dedego.nl Dennis de Goede

    I fixed the spacing in Chrome by doing a reset in CSS, like so:

    * {
    padding:0;
    margin:0;
    border:0;
    outline:0;
    }

    Works like a charm for me

  • michael

    hehe, I had really to laugh..
    it’s so logically, it’s a miracle that i didn’t come to that idea ;) funny..

  • http://www.designhills.com prathap

    Great Tut

  • cuginoAle

    The major point of employing CSS over BG images is flexibility.
    If you need to show tabs in different colours you can just change the border-color rather than generating several images.

    I have noticed a little “bug” in your implementation though… the tab clickable area extends over the anchor for about 20px.
    This is because off the 10px padding you defined; to fix it I did the following:
    - padding:0px
    - line-height:34px
    - text-indent:10px

    Tested to work on Chrome and FF.

  • Remo

    How do you get the browser to update after a change? Is that Espresso’s doing or do you run something in the background? You don’t seem to save the updates even.

    Great tut btw!

  • http://tutsmais.com.br/blog/ Ofelquis

    This is perfect =)
    only a little of jquery to something wonderfull.

    Congratulation! ;)

    ps: my english is not good :/

  • http://www.jeffadams.co.uk Jeff Adams

    I always love these little nifty CSS tricks. I must admit that 99% of the time I’ll try myself and then fail, and go with an image instead :-)

    I just posted an article on my website for a CSS3 Gradient Picker that your readers might find handy – it’s Photoshop-eque and quite frankly I couldn’t live without it.

  • Eder de Jesus

    that’s a great POG!!!

  • Dave

    Jeffrey,
    Thanks so much for this! Between this and CSS3, I’m carving up fewer and fewer images – it’s great!

    And there’s pretty stunning cleverness and creativity in the responses here, too.

    Thanks to you and everyone!

  • Samuel

    Awesome trick but naturally any one wont leave it as it is without at least trying s’mthing like this

    a:hover {
    border-bottom: 30px solid #6c6c6c;
    }

  • Stijn Martens

    You better add a div to the heading,
    And skew that div 45 degrees with CSS3 transition.

    • Stijn Martens

      I meant CSS3 transform :P

  • Ian

    Interesting tutorial. not how I would have done it but it’s always great to learn new ways to accomplish things. I made something similar just as a proof of concept. CSS below

    .ribbon {
    background: #124f6f;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#294069), color-stop(100%,#3F6FAA)); /* webkit */
    background: -moz-linear-gradient( left, #294069, #3F6FAA);
    height: 40px;
    width: 125px;
    position: relative;
    margin-left: -25px;
    color: rgba(255,255,255,1);
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,.6);
    font-size: 25px;
    }

    .ribbon:before {
    content: ” “;
    position: absolute;
    top: 100%;
    border-top: 20px solid #03153d;
    border-right: 0px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    }

    .ribbon:after {
    content: ” “;
    position: absolute;
    left: 100%;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 0px solid #3F6FAA;

    }

    This was made as a a ribbon that overflowed from it’s container, that’s why there is a negative margin it.

  • http://brianswebdesign.com Brian Temecula

    Interesting use of CSS, but in regards to the example, I’d still end up using an image instead. I guess if the goal is to have no images, then a diagonal line via CSS could really spice things up … LOL. Would you ever use this technique on a real website?

    • michael

      hehe, not really.. you would never know, how the next ie version would handle something like this ;) but it’s a great tut and shows another way to handle things, maybe it results in great further ideas.

      i’m not really a fan of background images, but for a client page, i still would use it. for personal experimental pages, why not via css.

  • http://deadtothee.com Dead To Thee

    This is very helpful. Thanks!

  • http://www.stevejonescreative.com Steve

    Great tutorial but sometimes it’s more practical to just use and image. No hacks required for cross-browser support.

  • techeese

    how do you fix the issue with upper part being clickable in the “New Music” since you lowered the text?

    • cuginoAle

      hi, check my previous comment ;)

  • Tony

    This is what it looks like in chrome from the ‘Demo’
    http://bit.ly/ljXfal

  • http://mokshasolutions.com Moksha

    thats a really cool way to get that effect.

    thanks

  • RZV

    Hello ,

    Can help me someone with a program for CSS3 in windows 7 ?

    Thank you

  • Nisar

    Great tutorial. I’m first timer to this site, but am already in love with it. Thanks for posting it.

  • Jack

    Brilliant Tut as always, but would this code have any negative effect on SEO?

    • http://gnarmedia.com Adam Murphy

      My non-expert opinion would have to be no. If you have used an image in its place, with image text, and no alt, then yea, it’d possibly impair your results.

  • RZV

    Hello ,
    Can help me someone with a program for CSS3 in windows 7 ?
    Thank you

  • earaya

    Hey Guys,

    Could you use this technique to make a “more” arrow out of css? If so, lemme see!

    Thanks!

    Jeffrey Way is Supreme.

    • http://gnarmedia.com Adam Murphy

      You asked, and so I made a proof of concept:

      .tab
      {

      border-right: 12px solid transparent;
      border-top: 12px solid #4c4c4c;

      display: block;
      width: 120px;

      margin-bottom: 5px;

      }

      .tab a {
      margin-top: -44px;

      padding: 10px;
      text-decoration: none;
      color: white;
      font-weight: bold;
      text-shadow: 0 1px 0 black;
      line-height: 45px;

      border-right: 12px solid transparent;
      border-bottom: 12px solid #4c4c4c;

      height: 0;
      display: block;
      width: 100px;
      }

      New Music

      I can guarantee you there is a way to clean this code up, and make something pretty nice :]

  • Ciwan

    Jeffreyyyyyyyyyy this was AWESOME.

    Thank You So Much. :)

  • Adam

    Change the width of the right border and you can adjust the angle of the diagonal line. Awesome!
    Nice work.

  • Owe

    I think all inline elements has this issue with the extra pixels in webkit. It’s not a bug as far as I remember. It is easily fixed in this example by setting vertical-align: bottom; to the a element instead of the webkit hack.

  • Roland

    Thanx once again Jeff…

  • http://creativemanner.com Creative Manner

    Great Tut Jeff.

  • http://www.mbdesigner.nl Maurice

    They used it for the Android Market as well.

    https://market.android.com/

  • http://www.miroamarillo.com J

    Nice Tut! A great technique that will be in my sites soon. I did it without problems with spaces. I believe that’s the big advantage of having a good reset section in the top of your css. Here’s mi reset if anyone wants to use it.

    @charset “UTF-8″;

    /* reset.css file miroamarillo V7.0 */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, span, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody,
    tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border: 0 none;
    outline: 0 none;
    font-size: 100%;
    vertical-align: baseline;
    background: none repeat scroll 0 0 transparent;
    /* text-rendering: optimizelegibility; */
    position: relative;
    }

    body {
    line-height: 1;
    font-family: ‘Helvetica Neue’,Helvetica,Arial,sans-serif;
    }

    table {
    border-collapse:collapse;
    border-spacing:0;
    margin: 0;
    padding: 0;
    border: 0;
    }

    address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
    }

    ol,ul {
    list-style:none;
    }

    caption,th {
    text-align:left;
    }

    h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
    }

    q:before,q:after {
    content:”;
    }

    abbr,acronym {
    border:0;
    }

    a img {
    border: 0;
    }

    img {
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    }

    a {
    text-decoration: none;
    color: #3197c5;
    }

    li {
    list-style: none;
    line-height: 0;
    }

    .float {
    float: left;
    }

    strong {
    font-weight: bold;
    }

    br.clear {
    clear:both;
    display:block;
    height:1px;
    margin:-1px 0 0 0;
    }

    /* End of Resets */

    After you use this reset portion, you can set up custom line-heights for the paragraphs, h3, h2, h1 and other elements you want. This gives you a nice start to set up and align your layout. I normally set up also font classes and color classes that I can apply to my elements at no time inside the html.

    Hope it works for you guys out there!

    Cheers!

    J.

  • http://www.islamfeed.com/ Ahmed Ahmed

    a {
    padding: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: inline-block;
    float:left;

    border-right: 30px solid transparent;
    border-bottom: 30px solid #4c4c4c;

    height: 0;
    line-height: 50px;
    }
    div {
    display:block;
    float:left;
    border: 1px solid #4c4c4c;
    border-top: 3px solid #4c4c4c;
    padding: 20px;
    }

    added float:left; to anchor tag and added display:block; float:left; to the div thats all !! works on chrome IE and firefox

  • edan

    though it is not the nicest solution,

    going through google’s code on the music site,
    I noticed that the the “top border” of the bottom box is actually the bottom border of the div surrounding the link.

  • http://bloggeranalytics.blogspot.com Anjali

    I love your site.so much stuff to learn and to share. I will definitely share some of it on my blog at Blogger Widgets.

    thanks.

  • harry

    thanks nettuts!!
    i build my first web site just by watching ‘web development from scratch’ tutorials…

  • http://shinewap.mobi samsher

    No need to hack for google chrome,
    as you said in google’s new version it is already fixed,
    it works great in both google chrome and mozilla firefox.
    i am using chrome’s version 18.0.1025.151 m

  • jiangorngbo

    perfect!
    I love your site very much~~~~~~

Newer Comments →