digg

Join DiggAbout

Donkeys and Elephants and Delegates,oh my!
Check out the most popular Elections 2008 content on Digg.

Rounded Corners for your webpage without images

pro.html.it — using javascript.

Bury
show profanity settings
expand all
  • tuxidomasx, on 10/12/2007, -17/+8thats actually pretty neat. but i think i'll stick with images. more control. and less code = a good thing
    • davidv, on 10/12/2007, -2/+6I think you have that statement backwords
    • bonchbonch, on 10/12/2007, -6/+4I use the nightly build of Safari which supports CSS3's border-radius. I'm avoiding any JavaScript or image solution and just waiting for browsers to catch up to CSS3. Actually, this solution uses CSS but does it in JavaScript...no thanks!
    • dognose, on 10/12/2007, -2/+5The css rounded borders is supported by firefox. It's much less code and looks great!
    • deesine, on 10/12/2007, -1/+1Did anyone else get the "everything's square, oh, but now it's rounded" effect when loading pages using this technique?

      I agree with tuxidomasx, and every other admin I've worked with on large sites: more control & less code == good.
    • apotropaic, on 10/12/2007, -1/+2Yea more control less code == good... yada, yada, yada. But this guys gives you full control for rounded edges of any size and color. What more control would you want? As far as code goes if you want to whine about 2,500 bytes that gets cached after the 1st use...fine, but its not that big of a deal.
  • feshmania, on 10/12/2007, -4/+2looks pretty good.
  • ddrirc, on 10/12/2007, -3/+2Very nice, I'll be trying it tonight. :3
    • thecoolestcow, on 10/12/2007, -0/+3Sorry for the off-topicness, but what the heck smiley is :3 ? Balls-in-mouth? Walrus? Now I want to know...

      Anyway, what's wrong with image backgrounds?
    • podgey22, on 10/12/2007, -1/+1Its a cat smile

      Not to be confused with (:3
      Which is a bunny smile
  • Jackolicious, on 10/12/2007, -30/+7DUPE
    http://digg.com/design/Nifty_Corners:_rounded_corners_without_images_using_CSS
    • zone, on 10/12/2007, -3/+15that was posted "194 days ago" and only got 34 diggs.. I don't like dupes either but sometimes they are not that big of deal.

      digg +1
    • thegeekpea, on 10/12/2007, -3/+11gee i'm glad this dupe was here otherwise i would have never found this article.
  • flamingmb, on 10/12/2007, -2/+0make everything easier on the eyes.
  • JeremyVaught, on 10/12/2007, -3/+1I've used this in the past. It is very solid. I really like it.
    • teeheehee, on 10/12/2007, -5/+1Hmm, this was supposed to be posted somewhere else - no way to delete a post!
  • sdwebguy, on 10/12/2007, -2/+13"Using JavaScript" is a bit of a bad description -- it is really using CSS. Javascript may be used to help apply the CSS to multiple "boxes". Otherwise, neat effect in my opinion without having to create/load images for diff colors, sizes, etc.
    • teeheehee, on 10/12/2007, -1/+2It uses a combination of CSS and JavaScript. If I remember correctly it's the JS that actually performs the rounding effect, CSS helps define where.

      I've used it on a site before and it's nice because there's not a lot of overhead for creating lots of graphics to suit different color palettes, just change the CSS/JS and it's done. Very handy for rapid development where the end user changes colors all the time.

      The only real problem I've had with it is when height/width values of a div are exceeded with content, it can cause the rounding to occur in a position where the external color continues above or below where it should have stopped. This can also happen with some nesting of divs. It can bit a little bit finicky.
  • anagoge, on 10/12/2007, -1/+1A very good idea. Very simply and even very obvious and yet I've never thought about doing it.
  • mattverso, on 10/12/2007, -5/+2Rounded corners? How very 'Web 2.0'.

    Looks pretty good though.
  • matthewecornish, on 10/12/2007, -1/+3I've been following development of the same thing but by someone else - http://www.totalinfinity.com/ :)
  • slapout, on 10/12/2007, -1/+1According to the top of the article:

    "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" http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

  • meegosh, on 10/12/2007, -1/+0Wow, didn't even think of using CSS to this extent. Great info, great examples, I'll try it out when I have some more time on my hands. What would be the benefit of using this rather than images? Bandwidth, load times? It seems like the extra code would add a little bit more to the overall size of the page but the images take up room too.

    Any thoughts? Dugg.
    • vinny, on 10/12/2007, -1/+1Seems that the advantage would be that you don't have to create a different image for each size/color box.
  • Enigmastrat, on 10/12/2007, -6/+1Actually, that's with CSS, it just happens to be printing the CSS with Java. The Java is unneccessary, you just need stylesheets.
    • sdwebguy, on 10/12/2007, -0/+5Note: Not Java but JavaScript.
    • Enigmastrat, on 10/12/2007, -3/+1Right. I typed it too fast :) And I saw your first comment about the CSS and Javascript after posting, tried to correct mine, but ran out of time.
    • sembetu, on 10/12/2007, -3/+0Would you care to share a cross-browser non-javascript solution to the same problem illustrating the lack of need for javascript? I , for one would be VERY interested in seeing it. Particularly if it is truly cross-browser.
    • casiotone, on 10/12/2007, -0/+0try putting the stuff JS generates into your code. It'll work the same, won't require javascript - but it'll bloat your code tenfold.
  • wahlec, on 10/12/2007, -1/+0You can see this in real-world action at expedient.com
    Pretty cool stuff. Diggin'
    • Enigmastrat, on 10/12/2007, -1/+1Yeah, Digg and Revision3 use this method.
  • opnotic, on 10/12/2007, -1/+1It looks neat. Makes me realize I need to catch up on my HTML skills. I know nothing of even using .css For shame really. I need to dedicate a couple hours some day to nail this as my quick and dirty web-pages are starting too look more dirty than quick.
  • BJWisch, on 10/12/2007, -1/+1Same system Revision3 uses on there site.
  • olegk, on 10/12/2007, -12/+4DUPE

    http://digg.com/design/No-Image_Rounded_Corners_with_CSS_
    http://digg.com/design/Powerful_new_rounded_corners_javascript
    http://digg.com/design/PhpMyBorder_-_round_border_corners_on_the_fly
    http://digg.com/design/Great_Tutorial_for_Rouned_Corners_using_CSS
    http://digg.com/design/CSS:_Imageless_rounded_corners_for_Mozilla_IE
    http://digg.com/design/Nifty_Corners:_rounded_corners_without_images_using_CSS
    http://digg.com/design/More_Nifty_Corners
    http://digg.com/links/Nifty_Corners:_rounded_corners_without_images
    http://digg.com/design/Rounded_corners_in_IE_without_images.
    http://www.digg.com/design/Nifty_Rounded_Corners
    • Chongo, on 10/12/2007, -3/+3Yeah, doesn't it suck that people don't check digg every single day and night? or what about those idiots who want to show something very useful that they feel did not get a chance to reach more people?

      //sarcasm
    • crom99, on 10/12/2007, -5/+5DUPE COMMENT

      http://www.digg.com/design/Rounded_Corners_for_your_webpage_without_images#c1240916
    • alexw, on 10/12/2007, -4/+2*cough*

      You *DO* know you linked to this same digg page. Hence, the "dupe comment." Or maybe my sarcasm detector needs an update. Or maybe you're just stupid, crom99.

      Eh, I'll pick the latter.
    • mark1372, on 10/12/2007, -3/+2When you submit an article that is a dupe, Digg tells you...but people still choose to submit anyway. Ego or idiocy? You decide.
  • shockingbird, on 10/12/2007, -2/+2Very slick! Great for attractive thumbnails.
  • OutcastJiob, on 10/12/2007, -2/+3Dupe it may be, but I'd never seen this particular tutorial before, and it's quite useful. Digg.
  • bill.clark, on 10/12/2007, -5/+2Can anyone use CSS and JavaScript to fashion me a Web 2.0 razor with which I will slit my wrists? It's all getting a little old... can we come up with some new buzzwords?
    • sembetu, on 10/12/2007, -3/+0here's your razor, hurry up and put yourself out of my misery. in the mean time, why don't you try learning what web 2.0 actually is before you rant. the concepts behind what is driving web 2.0 are solid, perhaps some of the implimentations are not. in any case, hurry up with that razor.
  • xodex, on 10/12/2007, -1/+1Ahhhhhh the jags are back ;)
    • T0FU, on 10/12/2007, -1/+1yea thats the only thing that got me about it, over nice though.
  • iceblink2, on 10/12/2007, -4/+2Now you too can bend over backwards and take it up the ass by web trends.......

    ***** take risks in your designs....
  • danp, on 10/12/2007, -3/+2So let's get this straight
    1) You are using javascript
    2) To insert pointless markup
    3) That is deprecated

    Nifty corners was a terrible idea when it first came out, and it's only gotten stupider. The guy who created it should never do web development ever again, ever.
  • biffen, on 10/12/2007, -6/+1post deleted
  • asdren, on 10/12/2007, -2/+2the rico ajax framework (dugg last night)
    has pretty good rounded corner support
    http://openrico.org/rico/demos.page?demo=rico_corner
  • isolationism, on 10/12/2007, -2/+0... Except the developer is a jerk and says you can't modify the code in the slightest to suit your needs, because somehow the way he wrote it is perfect and you can either play by his ridiculous rules or he takes all his marbles and goes home.

    Imageless rounded corners is a idea, but you're far better off using images and Octopus or Rico to do the job until CSS 3 support is commonplace. Want to generate the images dynamically to suit your chameleon colour scheme? Learn to use ImageMagick or GD, they can do it all from scratch or you can simply use them to composite existing B&W images by using them as alpha channels to a variable-defined color.
  • alexw, on 10/12/2007, -0/+3Anybody else getting tired of all the front page articles about rounded corners? Hmm... I guess I just answered my question. They wouldn't be on the front page if people were sick of them...

    Damn you, logic!
  • jasonhe, on 10/12/2007, -1/+1very useful. thanks :)
  • spyres, on 10/12/2007, -1/+1A different way. No javascript, no images.

    http://www.cssplay.co.uk/boxes/snazzy.html
    • spyres, on 10/12/2007, -0/+1I'm going to assume the use of is in lieu of to be a bit shorter/easier to enter. I could be wrong though.
  • burke, on 10/12/2007, -1/+2I'm pretty sure you need a Javascript library to make this work. Not a big deal, but the corner images for my image version take up a grand total of 312 bytes.
    • SilentBobSC, on 10/12/2007, -1/+1You do, there is a library you need to download and then you need to assign properties inside another JS file, I've used Nifty in the past, but had too many problems with it. It does offer some flexibility if you're willing to decipher how it all goes together, but bloated and non-cooperative nonetheless.
  • synapse, on 10/12/2007, -2/+2Wow, people die of curable diseases every second and we're rounding image corners...

    "can I get the icon in cornflower blue?" - Fight Club
  • TheShrike, on 10/12/2007, -2/+1OK This is lame.

    It requires not only the addition of a lot of extra html markup, but javascript as well.

    That's about 150% overkill for something you can do with -moz-border-radius in FF, and a couple of legit CSS tricks elsewhere.

    And it's a bit misleading. After reading the title and description that it was a hack without CSS. But it requires a bunch of CSS. And a bunch of Javascript. And a bunch of HTML.
    Talk about bloat.
  • DarthTurducken, on 10/12/2007, -1/+1Technically not JavaScript - but it is a script - the NoScript Firefox extension will block it by default

    /Captain Obvious to the rescue
  • cully, on 10/12/2007, -0/+1How does no one in this day and age know about nifty corners. It's been around for ages.
    • hooty, on 10/12/2007, -0/+1I don't know, perhaps people who create web sites spend more time creating them then reading blogs.
      This was new to me, (I've been creating websites since 1995 and earlier) but I still prefer my own images. The image is a small filesize, can be cached, and it's really easy to make webpage templates with images, assuming your site has more than a main page.
      I'm going to try this for use with templates, and it might make me switch.
      +DIGG
  • tm8747a, on 10/12/2007, -0/+0Nice one, I've used it before. Seems like the Ricco library has that feature too, haven't tried it yet though.
  • jacobo, on 10/12/2007, -0/+1can i digg twice?. thanks, works for me
  •  

    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.