Rounder corners - Developers

Yo, I'm starting to get in to designing stuff and developing stuff, slowly but surely getting the hang of it all.. again. I created this: [IMG]http://i52.tinypic.com/ayx2c1.png[/IMG] but I'm looking to turn those rectangles into rounded rectanges.. truth is I'm clueless how to. I've googled it and came across [url=http://www.devwebpro.com/25-rounded-corners-techniques-with-css/]this[/url] I've tried to do a few but it just seems really difficult for what I want to do. I thought something like this would be straight forward and easy.. I'm looking to do this, i've got the 4 images sorted out: [IMG]http://i56.tinypic.com/2ccs4eb.png[/IMG] have any of you got any ideas of how I would go about doing it? or have your own particular way?

[url]http://www.css3.info/preview/rounded-border/[/url] [code] #example1 { -moz-border-radius: 15px; border-radius: 15px; } [/code] Won't work in IE, except for maybe 9

[code]-webkit-border-radius: 15px;[/code]

[QUOTE=kingzl3y;24845212]Yo, I'm starting to get in to designing stuff and developing stuff, slowly but surely getting the hang of it all.. again. I created this: [IMG]http://i52.tinypic.com/ayx2c1.png[/IMG] but I'm looking to turn those rectangles into rounded rectanges.. truth is I'm clueless how to. I've googled it and came across [url=http://www.devwebpro.com/25-rounded-corners-techniques-with-css/]this[/url] I've tried to do a few but it just seems really difficult for what I want to do. I thought something like this would be straight forward and easy.. I'm looking to do this, i've got the 4 images sorted out: [IMG]http://i56.tinypic.com/2ccs4eb.png[/IMG] have any of you got any ideas of how I would go about doing it? or have your own particular way?[/QUOTE] [php] -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; [/php] That sorts out most browsers - Safari, Opera, Chrome and Firefox. Not IE, though. Also, using CSS3 prefixes will not validate under CSS 2.1; so you'll have to remove the 'valid CSS' if you choose to use CSS3 :v: (which you probably should)

[QUOTE=BrettJay;24853462][php] -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; [/php] That sorts out most browsers - Safari, Opera, Chrome and Firefox. Not IE, though. Also, using CSS3 prefixes will not validate under CSS 2.1; so you'll have to remove the 'valid CSS' if you choose to use CSS3 :v: (which you probably should)[/QUOTE] You can manually link to the CSS3 validator.

ah thanks alot! it worked perfectly! [IMG]http://imgur.com/qdb1z.png[/IMG] although it doesn't validate in css3 D:

Yeah, technically the prefixed css attributes won't validate. :C

[QUOTE=kingzl3y;24857680]ah thanks alot! it worked perfectly! [IMG]http://imgur.com/qdb1z.png[/IMG] although it doesn't validate in css3 D:[/QUOTE] Validation is over-rated. While it does help with accessibility, you will notice that Google and M$ don't care about it and they are doing just fine.

Have an "almost valid" link, I've seen it before, and make a page to explain that the prefixed attributes aren't valid. Not that it makes the slightest bit of difference to accessibility.

[QUOTE=bios_hazard;24857935]Validation is over-rated. While it does help with accessibility, you will notice that Google and M$ don't care about it and they are doing just fine.[/QUOTE] You're right. I've always thought that. In every courses I've done.. there's always a few lectures on how important it is to be validated. I always mention google and a few other massive sites and they can't answer me. andersonmat, you're my idol. I wish after my honours degree, I'm as good as you. and a few others. turb_ is also another.. and there's 2 or 3 more badass users.

[QUOTE=kingzl3y;24858038]You're right. I've always thought that. In every courses I've done.. there's always a few lectures on how important it is to be validated. I always mention google and a few other massive sites and they can't answer me. andersonmat, you're my idol. I wish after my honours degree, I'm as good as you. and a few others. turb_ is also another.. and there's 2 or 3 more badass users.[/QUOTE] Thanks bud, [img]http://www.facepunch.com/fp/rating/heart.png[/img]

[QUOTE=bios_hazard;24857935]M$[/QUOTE] h4rdc0r3 [editline]10:13PM[/editline] [QUOTE=kingzl3y;24858038]turb_ is also another..[/QUOTE] Awww, cheers :buddy:

[QUOTE=kingzl3y;24857680]ah thanks alot! it worked perfectly! [IMG]http://imgur.com/qdb1z.png[/IMG] although it doesn't validate in css3 D:[/QUOTE] CSS validation isn't anywhere near as important as XHTML validation, especially if the only 'errors' in your CSS are CSS3 prefixes.

Validation isn't important at all. Its just a tool to help you make sure your code is semantic lol. And btw, you could use the css3 examples and just add a JS library to force IE to use it too. Just load the script in conditional comments though, so it won't bog down the browsers that are actually doing a good job.

It doesn't matter if your CSS doesn't validate because of CSS3, it's perfectly fine and if anyone complains about it tell them to shut up.

[QUOTE=jaybuz;24867110]It doesn't matter if your CSS doesn't validate because of CSS3, it's perfectly fine and if anyone complains about it tell them to shut up.[/QUOTE] The only reason I brought it up was because his site says 'valid css'. Nobody ever said it was a problem, but I'm just letting him know that he probably should remove that particular link since it won't validate, even if we all know that there's no real-world impact from using CSS3 prefixes. Having a link that says 'valid css' only to reveal it's [i]technically[/i] invalid based on vendor specific prefixes would still look bad to people who are unfamiliar with CSS3 prefixes.

Nah. Thanks for pointing it out. I wouldn't of noticed otherwise. I guess html validation is way more important than css. even though they're not 100% needed.. it's still a good thing to have/do I guess. cheers for your input though!