digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Rounded corners without images

html.it — Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS.

Bury
show profanity settings
expand all
  • MindShadow, on 10/12/2007, -19/+8Cool JavaScript library that gives you rounded corners:

    http://www.curvycorners.net/
  • Casedot, on 10/12/2007, -3/+18who hasn't seen nifty corners yet? for better use and examples, check out CSSplay.

    http://www.cssplay.co.uk/boxes/snazzy.html
    • exobyte, on 10/12/2007, -4/+8seriously. I don't know CSS and I knew this could be done.
    • bleaknik, on 10/12/2007, -1/+3I'd love it if someone show me an example that's done using only 1 div... without any images, javascript, or superfluous tags... Snazzy corners looks nice...

      But it's lame to have to code this whenever we want pretty corners...

    • Casedot, on 10/12/2007, -1/+2the new iteration of CSS will be able to do it, but until then you have to use a different way.
    • bleaknik, on 10/12/2007, -1/+5... [last comment was truncated]

      Anyone have any examples that don't use JavaScript?
      Anyone have any examples without superfluous tags?
      Anyone have any examples without images?
      Is it still XHTML compliant?...
    • trylleklovn, on 10/12/2007, -3/+5This is so old i think my grand mom has heard of it.

      The problem though about Niftycorners is that it takes just a second to load, which makes the page "jump" when visited. Also it is of course javascript, which is never good for important stuff :P

      I have gone from using niftycorners to using images, as it is far better on most browsers.
    • TenebrousX, on 10/12/2007, -0/+4"the new iteration of CSS will be able to do it, but until then you have to use a different way."

      But Internet Explorer most likely won't, so we will have to wait longer :(
  • davidod87, on 10/12/2007, -2/+3Awesome. This saves an insane amount of time.
  • themulf, on 10/12/2007, -2/+3Thanks!
  • wicketr, on 10/12/2007, -4/+16Are 4KB images so bad that there needs to be "hundreds of articles" done to avoid them? Plus this method does use extra CSS which the description says it doesn't.
    • cresswga, on 10/12/2007, -0/+10Correction: Hundreds of articles submitted hundreds of times...
    • kendawg, on 10/12/2007, -1/+4You just have to look at one article to save the time of making your images. You don't have to look at hundreds of them.
    • FTLJohnson, on 10/12/2007, -1/+3Yeah, and where are the borders? haven't seen javascript based corners that have borders yet.
    • litolist, on 10/12/2007, -1/+3Images are a bit of a hacky way to do things, and depending on size and color of corners, you'll need different images if you want to keep things looking perfectly.

      With this, you can at least encapsulate the functionality in a method that adapts to your needs.
    • carl67lp, on 10/12/2007, -4/+2While I haven't read the article yet, I will say that *yes*, 4KB images are bad when they can be avoided. I work for a distance learning team at a very large university, and we routinely serve 7000 students on our courses. If we save 4KB in bandwidth over each student, we're talking about major savings (and not just financially).
    • vuke69, on 10/12/2007, -0/+5Depends on if you ever want to change colors, or have a patterned/gradient background. Makes those 4KB images start becoming a real pain in the ass.
    • vuke69, on 10/12/2007, -0/+3"Yeah, and where are the borders? haven't seen javascript based corners that have borders yet."

      like this?
      http://www.cssplay.co.uk/boxes/snazzy.html
  • Kamino, on 10/12/2007, -5/+4Extra server call = slower page loading (think Google analytics)
    Plus, this has been covered before, including a vanilla CSS method. (Thus not requiring javascript)

    Marked as lame.
  • takamalak, on 10/12/2007, -2/+13This is the oldest trick in the book. Looks good and loads fast though.

    Here are some other CSS trick pages:
    http://positioniseverything.net/
    http://www.cssplay.co.uk/ Everyone should know about this one
    http://www.bluevertigo.com.ar/ cool links page

    And for patterns:
    http://squidfingers.com/
    http://www.k10k.net/
    http://fractured-sanity.org/index.php?navi=3&site=pattern
    http://www.portfelia.com/patterns.asp
    http://www.1greeneye.net/index.html
    http://www.kollermedia.at/index.php/pattern4u/
    • Eddible, on 10/12/2007, -0/+1Cheers for the patterns links, I needed a few decent sites.
  • tilzinger, on 10/12/2007, -0/+1Or use a jQuery plugin, and have the rest of the jQuery library at your disposal while you're at it.

    http://methvin.com/jquery/jq-corner-demo.html
  • undersky, on 10/12/2007, -2/+1i am ignorant so this page was sooo cool! using img is just so tedious and hacky!
  • wozley, on 10/12/2007, -1/+4All we need now are shadows.
  • ampledismantle, on 10/12/2007, -0/+4Rounded corners is one of those things that just shouldn't be this big of a deal.
    But I guess it gives people something to work on in their spare time.
  • invader, on 10/12/2007, -0/+6"This page is intended to present the solution I came up"

    *****. i remember seeing the same css code almost a year ago, and dozens of times since then. at least change the name of the classes you're using if you're going to claim it as your own!

    plus, for those that haven't seen this months or years ago, it doesn't take long to change it to add borders. change the background-color of the one with the biggest margin to the color of your border. then on the rest, do this:

    border-right: solid 1px #yourcolor;
    border-left: solid 1px #yourcolor;

    easy.

    edit: just read the article more closely... it says he posted it last year, which makes more sense, but why would that person NOW submit it to digg?
  • steger, on 10/12/2007, -4/+3Too bad it's not semantic and what's with those < b > tags? At least use < strong > or < em > if your going to use an inline tag.
    • hotpepper, on 10/12/2007, -0/+2The only point to be using a strong tag would be to add strong emphasis to the content between the tags. Obviously, this isn't the purpose of the example. A more semantic tag would be a span tag. That's what they're for.
    • sulaco, on 10/12/2007, -0/+1He probably chose b because it is a tag you shouldn't use anymore, hence less chance of somebody using it in the document and assigning it one of the class names that he is using by accident.
    • steger, on 10/12/2007, -0/+2My mind went blank and i forgot about the span tag. That would be better than depreciated b tags.
    • hotpepper, on 10/12/2007, -0/+1It would be better than deprecated tags too; although, b tags have probably depreciated in value as well.
  • Chewie67, on 10/12/2007, -2/+9Attention MOZILLA, MICROSOFT, APPLE and OPERA SOFTWARE:

    Please, please, please just implement TRUE, ANTI-ALIASED, rounded corners in your CSS support. Then we can do away with all these hacks and hassle.
  • jrizzo, on 10/12/2007, -2/+2Someone give this man a medal, and some bonus ribbons for everyone that posted links! There needs to be a spot for developer links like this ;and I know there are several so don't post them, I am saying we need ONE GOOD ONE.
  • Petrarch1603, on 10/12/2007, -6/+1can i use this on my myspace profile?
    • Eddible, on 10/12/2007, -0/+1No. MySpace doesn't allow javascript to be ran on your profile. Only hope for rounded corners (as far as I can tell) is to wait for CSS3 to become mainstream, but saying that, I bet it would still be hard to achieve on a MySpace profile because it's all tables rather than div tags. Eugh, lovely ay?
  • judofyr, on 10/12/2007, -1/+4"that [...] extra markup nor CSS"

    O rly?

    HTML:
    < div id="container">
    < b class="rtop">
    < b class="r1">< /b> < b class="r2">< /b> < b class="r3">< /b> < b class="r4">< /b>
    < /b>

    < b class="rbottom">
    < b class="r4">< /b> < b class="r3">< /b> < b class="r2">< /b> < /b>
    < /b>
    < /div>

    CSS:
    .rtop, .rbottom{display:block}
    .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
    .r1{margin: 0 5px}
    .r2{margin: 0 3px}
    .r3{margin: 0 2px}
    .r4{margin: 0 1px; height: 2px}
    • sulaco, on 10/12/2007, -0/+3I think the point is that the user generated markup does not need all that extra crap. It is inserted dynamically by javascript. If js is disabled you just get a regular box.
  • hotpepper, on 10/12/2007, -0/+8It would be so much easier if browser makers simply supported border-radius.

    http://www.w3.org/TR/css3-background/#the-border-radius
    • Zipp425, on 10/12/2007, -2/+4yup... to bad its only firefox at the moment...
    • coolbru, on 10/12/2007, -0/+2(for the second time) It's been in Safari nightly builds for a year or so, been working right for the last few months. http://webkit.org/blog/
      Firefox uses a proprietary tag (quite rightly, because CSS3 is not final). Safari nightlies use the CSS3 syntax, but then it's not released yet, so both browsers are playing by the rules.
  • Cojawfee, on 10/12/2007, -1/+5Isn't the point of web development to take design out of the markup?
    • Zipp425, on 10/12/2007, -1/+4yup. this really isnt that great of a solution... so much extra markup just for rounded corners...
  • ostracize, on 10/12/2007, -3/+1Nice and simple, I like.

    Couldn't it all be made even easier with something like:
    .rtop, .rbottom {
    ...
    }
    ...
    .roundeddiv:before{
    content( ... )
    }
    .roundeddiv{
    ...
    }
    .roundeddiv:after{
    content(...)
    }

    Then just use:
    div class=roundeddiv
  • 022A, on 10/12/2007, -1/+5I give rounded corners till spring '07.

    After that they will joint Lens Flare, Blink Tag, Image Flip, Drop Shadow and Hirosh Font in the overexposed web design retirement home.
  • bnortham, on 10/12/2007, -1/+1This is great if you don't care about providing actual semantic meaning in your markup.
  • emilyizzles, on 10/12/2007, -0/+0there's also a neat way to do it with a bullet on each corner!

    i can't wait for css3 to become standard on all web browsers!
  • Dracos, on 10/12/2007, -0/+2Use the border-radius property. Every other technique is a hack.


    You could even use this to get people off of IE. "Want to see rounded corners? Get a browser that doesn't suck."
  • m00kie, on 10/12/2007, -2/+1spend more time figuring out how your site can make you money and less time on rounded corners.
  • nanomaton, on 10/12/2007, -0/+5Am I the only person that read the first paragraph?

    "This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube."

    http://www.html.it/articoli/niftycube/index.html

    So to all the people who commented "this is old news", you're correct... and the author agrees that it's old news within the linked article.
  • dynacrylic, on 10/12/2007, -1/+1I gave this a quick glance and modified our current headers and footers to their specification and Walla- it works like a charm. Surprisingly many people seem to notice the rounded corners almost immediately and really like.

    thanks for sharing this!
  • nubnub, on 10/12/2007, -0/+0javascript counts are extra markup...
  • Zampa, on 10/12/2007, -0/+1RUZEE.Borders FTW!

    From the feature list:
    * Border style definition via CSS and CSS-like JavaScript
    * Anti-aliased rounded corners similar to the successors of Nifty Corners
    * A symmetric shadow similar to the ones of Mac OS X
    * Configurable border widths
    * Outside as well as inside background image support (gradients)
    * A kind of glow which is based on the shadow feature with a configurable color
    * A fade effect which lets the border color fade into the background color
    * All that at every edge/corner or only at some of them
    * Works on all modern browsers, even Opera and Konqueror
    * Colors and layout of the borders are defined in the CSS - if JavaScript is disabled your web site looks like its cubistic twin

    http://www.ruzee.com/blog/ruzeeborders/
  • dennytang, on 10/12/2007, -0/+0Wow that guy actually "came up" with it? What a liar. His article dates april 6, 2005. Even I saw it before that. Stupid people trying to take credit for something they didn't invent.
  • plasticmind, on 10/12/2007, -0/+1"...that doesn't requires images, extra markup nor CSS..."

    Who the heck diggs articles like this? The description is a blatant lie, especially since above the fold on the NiftyCorners page has tons of extra markup and the css you need to impliment to use it. The Digg front page is starting to look more like the Daily Sun than an online knowledge base...
    • jon3k, on 10/12/2007, -0/+1Not to defend the submitter (because he should have read it), but the article itself clearly states that it doesn't require CSS, then goes on to show the required CSS code.
  • soupisgoodfood, on 10/12/2007, -0/+2No digg. This uses heaps of frivolous tags. I'd rather just use images. It looks better and is much better from an accessability point of view, too, ironicly.
  • jon3k, on 10/12/2007, -0/+1"This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS."

    then down about half a page ...

    "And here's it the basic CSS:"

    Yeah, so it doesn't require CSS but it does. Marked inaccurate.
  • makingme, on 10/12/2007, -0/+1seriously, old news.
  • ChippyLasticko, on 10/12/2007, -0/+1Wow, it still is a nice effect.
  • maninc, on 10/12/2007, -0/+0Irrespective of whether it was dugg earlier or not. Irrespective of if questions of usage for large scale apps, irrespective of old news vs new news...irrespective of anything, The guy is creative enough to do this up for us all and release it as open source. so lets be appreciate of this and encourage...so that creativity doesnt die..!!
  • roryt, on 10/12/2007, -0/+0That is pretty cool. Now what to do with it? mm...
  • theadvinci, on 07/01/2008, -0/+1Rounded corners - so you wouldn't hurt yourself.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.