Rounded Corners

This is a discussion on "Rounded Corners" within the Web Page Design section. This forum, and the thread "Rounded Corners are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Apr 17th, 2007, 21:56
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Rounded Corners

Hey everyone i know this can be done but how can you do Rounded Corners in CSS like these www.texasholdem.com without using "IMAGES"

Thanks
Aaron
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Apr 17th, 2007, 22:13
JustinStudios's Avatar
Reputable Member
Join Date: Mar 2007
Location: USA
Posts: 404
Blog Entries: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

As far as I know it can't be done without an image because I have seen nothing to that effect yet...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Apr 17th, 2007, 22:14
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Hey it can be done mate i think you do it by radius or something lol
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Apr 17th, 2007, 22:15
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

cause reson why i want a website template something like www.texasholdem.com
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Apr 17th, 2007, 22:17
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

If you are talking about the white rounded corner for the outside edge that would have to be done in a graphics program and sliced and placed into the div. If you are talking about the black rounded corner area you could use this type of thing:http://www.smileycat.com/miaow/archives/000044.php

Tons of different options for you there.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Apr 17th, 2007, 22:20
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Hey ok thanks for replys how will i be able to place it all nicely like texasholdem.com once got the corners right
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Apr 17th, 2007, 22:26
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Those tutorials will explain it nicely...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Apr 17th, 2007, 22:27
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

ok if i get stuck on layout Linda will you try and help me please
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Apr 17th, 2007, 22:31
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Yup... I will do my best Aaron! Just post a question in the css or html forum..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Apr 17th, 2007, 22:32
Most Reputable Member
Join Date: May 2006
Location: North West, UK
Age: 22
Posts: 1,173
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

You can do rounded corners with CSS3 but it's poorly supported at the minute.

What do you want to use them for? will the box be a fixed size and shape or do you want it to stretch to accommodate the content?

There are approximately 4 million ways to do rounded corners with css, different techniques suit different applications. I like roger johansson's transparent customs corners and borders technique. It's very good.

Pete.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Apr 17th, 2007, 22:36
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

i am using the technique to create a site like this www.texasholdem.com ok and hes used pure css to do it no images except for the Header

and yes i want some to be strected to fit content and some they are Fixed sizes
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Apr 17th, 2007, 22:43
Most Reputable Member
Join Date: May 2006
Location: North West, UK
Age: 22
Posts: 1,173
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

He's used background images in the css. You can't really do it otherwise. I'd recommend the one i posted above (the transparent corners one) it's really good - uses a minimum of extra mark-up and is totally customisable.

Pete.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Apr 17th, 2007, 22:54
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

ok lol. So how can i change the css of this into rounded corners?

http://www.thenoodleincident.com/tut...on/basic4.html

Please

Thanks
Aaron
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #14  
Old Apr 18th, 2007, 01:55
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

There are JavaScript ways to do rounded corners as well, although I'm rather partial to just using images.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #15  
Old Apr 18th, 2007, 09:08
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Ok i will try the css imag one
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #16  
Old Apr 18th, 2007, 10:55
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

There is one way of doing it without images lol but i don t know how to fix it how can you do Border-Radius in I.E and get it to work as i tried the
Code: Select all
-moz-border-radius: 1em;
but that for mozilla and it works cause tried but i want one for I.E any help i would be most appreciated

Thanks
Aaron
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #17  
Old Apr 18th, 2007, 11:16
Highly Reputable Member
Join Date: Jul 2005
Location: Northampton, England
Age: 19
Posts: 506
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

using images is the easyest way and it still has a great effect. personaly i dont realy see the point in thryin to find it with out using images just seems pointless to me...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #18  
Old Apr 18th, 2007, 11:33
Reputable Member
Join Date: Jul 2006
Location: Baldock
Age: 20
Posts: 465
Thanks: 1
Thanked 0 Times in 0 Posts
Re: Rounded Corners

lol ok then if you think should do with images it not as easy as you think lol thats why wanted to use none images becaus be easier to change other from the rectangle css square i have now to Rounded thats why didnt want to use images
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #19  
Old Apr 18th, 2007, 12:34
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

Trust me... use images. Any Mozilla way (i.e. the method you posted) sucks. You won't find a magical solution. Do what the pros do, use GIFs.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #20  
Old Apr 18th, 2007, 13:15
Highly Reputable Member
Join Date: Jul 2005
Location: Northampton, England
Age: 19
Posts: 506
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rounded Corners

using images is easy.... all you do is make it a background image and your done.. well apart from makin it in a graphics prog allready but thats not hard....
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
corners, rounded

Thread Tools