1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Rounding the corners of a box

Discussion in 'CSS' started by spik3yb0i, Mar 14, 2008.

  1. #1
    Hi all

    I would like to have curved rounded corners on the box in the main content.

    URL: http://www.e-voice.org.uk/superhighways/

    I want to do this using CSS and without uploading images to create the rounded look.

    Any help?
     
    spik3yb0i, Mar 14, 2008 IP
  2. slaydragon

    slaydragon Banned

    Messages:
    1,403
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    slaydragon, Mar 14, 2008 IP
  3. libertygone

    libertygone Active Member

    Messages:
    2,625
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    90
    #3
    Nifty Corners are a pain in the booty. I would just use images unless you absolutely cant use images :)
     
    libertygone, Mar 14, 2008 IP
  4. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ChaosFoo, Mar 14, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    deathshadow, Mar 14, 2008 IP
  6. FunkyFresh

    FunkyFresh Peon

    Messages:
    499
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    just wondering but when you slice, cant you just slice the round object with transparent background then render as .gif? saves all the coding and such
     
    FunkyFresh, Mar 14, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Not sure what you mean. An image has no "coding" as far as a web page is concerned.

    If you mean slicing a PSD or the such and magically turning it into HTML, no, that
    s considered bad practise and can get you invalid, bloated code : )
     
    Stomme poes, Mar 14, 2008 IP
  8. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #8
    What's the best method without using javascript and making sure the corners/images expand with the site during text enlarge.
     
    Divisive Cottonwood, Mar 14, 2008 IP
  9. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #9
    actually niftycorners seems to hold up pretty well as long as you change the pxs to ems... why did you say it has 'quirks' deathshadow?
     
    Divisive Cottonwood, Mar 14, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I dunno what he means by quirks, but as far as bloat, there's a class on every <b> and while that's fine, you could just put a class on the first one and refer to the rest in CSS by selectors (the space).
    <b class="foo"><b><b><b></b></b></b></b> or whatever

    b.foo b {
    stuff;
    }
    b.foo b b b {
    more stuff;
    }

    Doesn't affect performance but there's coding and then there's thinking first and then coding. : )

    I suppose you could use images whose sizes were in % and they could scale then... it would look a little strange but also kinda neat.
     
    Stomme poes, Mar 15, 2008 IP
  11. opuschamber

    opuschamber Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    wow ... great post... thank you ... finally i found how to make rounded corners without image.

    Thank you
     
    opuschamber, Jan 8, 2010 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    Just use 'border-radius' and don't mess with all that stuff. Works in all the modern browsers using their browser extensions (-moz-border-radius: stuff).
     
    drhowarddrfine, Jan 8, 2010 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Which means jack **** when 60-70% of the browsing public cannot see it, and most business clients are still using IE6 at work because of some in-house crapplet that doesn't work when newer versions of IE are installed.

    Besides border-radius falls into two categories - CSS3 a specification not even out of draft meaning it has NO **** BUSINESS being used on a production website... second the use of browser specific properties, something we do WAY too much of to support IE being behind the curve and Gecko STILL not having proper CSS2/HTML4 support without adding more of that crap onto the pile.

    Given how long it took for CSS2 to go from draft to deployable (and that the leading two browser makers BOTH still don't support it right) CSS3 and the browser specific equivalents get filed in the "fun to play with, fun to test for filing bug reports, but you have no business using" category.
     
    deathshadow, Jan 8, 2010 IP
  14. Dogs_and_things

    Dogs_and_things Active Member

    Messages:
    97
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #14
    I'm using that exact same "something" on my site.
    I didn´t bother about the rounded corners, I like it as it is, a nifty border around my content.:)

    The image you use with the rounded corners looks good too.
     
    Dogs_and_things, Jan 8, 2010 IP
  15. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #15
    Let them eat cake. It won't matter in 3 years when most people won't be using IE anyway.
    This is one of those specs that will be in the final. Don't worry about it.
    The difference with IE is you know the modern browsers will eventually support the spec. You know IE probably won't or will take too long.
    CSS2.1 only became final two years ago. No spec finalizes till there are two complete implementations. Are you going to wait 10 more years for that?

    Feel free to safely use border-radius.
     
    drhowarddrfine, Jan 9, 2010 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Heh, old old thread.

    You know something we don't, Doc? My country has no plans of leaving their beloved IE anytime soon, even though FF is getting popular with the kids.
     
    Stomme poes, Jan 10, 2010 IP
  17. ORiN

    ORiN Well-Known Member

    Messages:
    753
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    130
    #17
    I am not sure if isolating internet users is the way to go. Firefox is 5 years old but most people are still using IE. I doubt that 3 years is going to make a lot of difference. If 60-70% of the public can't view it, the usability and functionality of the website is as good as nothing.
     
    ORiN, Jan 10, 2010 IP
  18. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #18
    Windows7 is now required to offer all users browser choice in Europe. I don't recall if that will also be true elsewhere.
    IE has been surpassed as the leading browser in several countries.
    By the end of the year, ChromeOS will be out with that OS and the Chrome browser.
    NexusOne and Droid phones offer the Chrome browser.
    IE loses about 7% market share per year without all that.
    IE can't handle most of the technology planned for the web today and IE9 won't be much better.

    In 3 years, most people will be using either Firefox or Chrome. Guaranteed. Save this link and get back to me on January 10, 2013.
     
    drhowarddrfine, Jan 10, 2010 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    Precisely - for all the inroads the alternative browsers have made, the majority of the public consists of Dee Dee Dee users who's entire knowledge of the internet is "Duh, I click on the big blue E"...

    ... it's actually something as technogeeks we often loose sight of. 99% of the stuff we discuss on forums like this means jack **** to Joe sixpack, who doesn't know and doesn't WANT to know any of this crap - which leaves them sitting there scratching their head wondering what you are on about with this "Firefox geekery" or even "The need to upgrade" when they've been using IE just fine for a decade.

    It ranks among the biggest problems in introducing new things to existing fields - unless there's some massive feature you cannot do on the old system it is unlikely you'll see rapid changes in public use... and news flash - for the average user things like plugins, flip navigation, even simple things like Opera's speed dial is NOT big enough to get the majority of people to stop using what they've been using for a decade, and in many cases goes right over the head of the person who wants to open the browser, have a search on whatever page it defaults to, and cannot even master the intricacies of using the bookmarks menu.

    Ask yourself this - is there ANYTHING from a user experience point of view once the page is rendered that ANY of these new ways of writing pages brings to the table that you couldn't have done in HTML 3.2 with some javascript assistance? I mean deal breakers to the end user - for the majority of websites the answer is no.... We might be doing goofy animated effects, it might give us as developers access to things like transparency effects - but in terms of actually delivering content to the user there is ZERO difference so far as they are concerned.

    The only people any of this matters to is developers - and there's the rub... We've been hearing people talking trash like "people won't even be using IE in three years" for over a decade, and frankly it needs to be filed alongside other types of speculative nonsense and wishful thinking alongside "This will be the year of the linux desktop", "Apple is finally going to be competitive on price"... or "Obama is going to end our financial woes".

    The track record says otherwise.
     
    deathshadow, Jan 10, 2010 IP
  20. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #20
    If that were true, why has Microsoft lost 33% of the market?
    Strawman argument. Doesn't work that way.

    As far as browsers go, the landscape has changed, the tide has turned, Microsoft no longer matters. Bookmark my post. I guarantee this: IE WILL HAVE 33% OR LESS MARKET SHARE IN THREE YEARS.

    Did you write that down? Good. Talk to you then.
     
    drhowarddrfine, Jan 10, 2010 IP