Welcome to WebmasterWorld Guest from 50.16.126.107

Forum Moderators: not2easy

Message Too Old, No Replies

Round corners with no images

border-radius

     
8:51 am on May 3, 2011 (gmt 0)

New User

5+ Year Member

joined:May 3, 2011
posts:4
votes: 0


Any new ideas possible to curve box with out image css
5:11 pm on May 3, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:938
votes: 25


Use border-radius (and -moz-border-radius for Firefox). It's cross-browser compatible and gives good control with a nice effect.
12:58 am on May 4, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:745
votes: 9


The newest browser versions directly support 'border-radius' without the vendor specific -moz or -webkit prefixes. For support of all versions include both in such a way that the newer browsers see 'border-radius' first.

Older IE browsers (IE5.x and IE6) will require a .hta hack or one of several curve corners javascript solution.

FWIW some elements resist curving attempts on the newer versions of IE (IE 7 + 8) and Opera (below 10.50), 'Fieldset' comes to mind. The Fieldset's 'legend' ends up being inside the 'box' rather than it's normal place along the top border of the box.
12:06 pm on May 4, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


You can create curves and pretty much any shape using basic CSS and will be compatible across all popular browsers past and present versions.

Experiment with the margin and height css properties

The specific browser hacks all they do is create more problems.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members