Rounding the corners of a box

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?

 

hi, try this website.

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

 

Nifty Corners are a pain in the booty. I would just use images unless you absolutely cant use images

 

The absolute best way to make rounded corners is something that DeathShadow came up with. Here is a tutorial:
http://battletech.hopto.org/html_tutorials//eightcorners/ (You just make the image have round corners and you are done)

Here is a template he helped me with for one of my sites:
http://battletech.hopto.org/for_others/chaosfoo/

It works amazingly well.

 

Nifty corners has a few 'quirks' that make me dislike it - largest among those quirks is that it's class heavy for no good reason.

Which is why I have my own technique:

http://battletech.hopto.org/html_tutorials/rounded_css_borders/

Which I do often apply via javascript like nifty does as well.

 

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

 

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 : )

 

What's the best method without using javascript and making sure the corners/images expand with the site during text enlarge.

 

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?

 

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.

 

wow ... great post... thank you ... finally i found how to make rounded corners without image.

Thank you

 

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).

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.