Rounded table corners 1

[mwebbo1]

I am looking to find out the technique of using the rounded corners that are being used at groups.yahoo.com. I would appreciate as much detail as you can in you explanation.
Thanks for the help! (p.s. I also want to do this with no images, I have used the images in the corners)

 

[BillyRayPreachersSon]

How many reasons do you want?

The main one that springs to mind for me: tables over CSS for layout are less desirable for some websites - especially anything that needs to be "more accessible".

Incidentally, don't confuse Java and JavaScript.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Foamcow]

..nor css and "messy"

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[imstillatwork]

Incidentally, don't confuse Java and JavaScript."

I don't.

My typing does.

 

[imstillatwork]

.rtop,.artop{display:block}
.rtop *,.artop *{display:block;height:1px;overflow:hidden;font-size:1px}
.artop *{border-style: solid;border-width:0 1px}
.r1,.rl1,.re1,.rel1{margin-left:5px}
.r1,.rr1,.re1,.rer1{margin-right:5px}
.r2,.rl2,.re2,.rel2,.ra1,.ral1{margin-left:3px}
.r2,.rr2,.re2,.rer2,.ra1,.rar1{margin-right:3px}
.r3,.rl3,.re3,.rel3,.ra2,.ral2,.rs1,.rsl1,.res1,.resl1{margin-left:2px}
.r3,.rr3,.re3,.rer3,.ra2,.rar2,.rs1,.rsr1,.res1,.resr1{margin-right:2px}
.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
.rx1,.rxl1{border-left-width:5px}
.rx1,.rxr1{border-right-width:5px}
.rx2,.rxl2{border-left-width:3px}
.rx2,.rxr2{border-right-width:3px}
.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}

Not messy as sloppy, but messy as whoa there... followed by an aaaahhhhh I see....followed by a ...why again?

I'm all for CSS, but I'm also all for keeping things simple. This combined with the javascript is not quite what I like to sell people.

It does degrade very nicely though.

 

[ChrisHunt]

No doubt, with a little work, that CSS could be tidied up somewhat. But who cares? You cut and paste that chunk of text into your stylesheet file. You upload the javascript file to your server and add the relevant <script> element to the top of your pages (you'll do this with SSI if you're smart).

All that complexity is held in one JS file and one CSS file - when CSS3 comes on stream you can remove one and change the other. In the mean time, you aren't cluttering up every page of your site with extra table markup purely to get a visual effect.

Some people seem to get a tremendous bee on their bonnet about "CSS Hacks". Personally I'd much rather have a big hack in one file - however ugly it might be - than have little ones on every single page of the site.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jstreich]

I suppose I've said this enough times that I should need to repeat the rant, but... It also uses Javascript, and so anyone who surfs with it off will not see your pretty rounded corners.

Using it for display stuff is fine (I do myself), but make sure you know what the site does without it.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[imstillatwork]

It does nicely degrade to square corners with no problems though.

Everyone seems to talk about css as faster, elegant, sleek, easy, clean, etc (which it is, and i use it a lot) but things like this don't seem to fit in well.

Chris, good point about being able to contain it, and remove it if needed very easliy.

It's a really cool demonstration of doing something most people automaticly think is 'impossible', but i will most likey never use this at all.

 

[HigleyLH]

Ok.. I know this isn't cross browser but is something that perhaps we can look forward to in CSS3. Mozilla has a really simple way to round corners. Here's a little something from one of my style sheets...

TD.textbox
{
	border-color: black;
	border: thin solid;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	[b]-moz-border-radius: 12px;[/b]
	-moz-opacity: .6;
	filter: alpha (opacity=60);
	vertical-align: top;
	text-align: left;
	background-color: White;
	height: 450px;
	padding: 5px;
}

The one line that is bolded will round the corners in Mozilla. If you use a negative value it will round the corners out. Hard to explain, if your interested just play with it.

 

[steven290]

for all you out there that say its not possible without images

this is only viewable with a mozilla(ff,etc.) browser but "still possible" - eventually others might support it

round corners

 

[steven290]

i know other people on this thread said this already just wanna put my 2sense in