CSS Border Radius

Kevin AKA Hubcap · 11-10-2009, 05:07 PM

I'm wondering if anyone here is using the border radius attribute in their designs and if you are how are you getting around the incompatibility with IE.

Kevin

AfroSamurai · 11-11-2009, 05:14 AM

as far as i knw this property only work in WebKit browsers and FF and still not supported by IE

SimonFairbairn · 11-11-2009, 07:57 AM

I just don't worry about it. Browser-specific CSS declarations are just ignored by browsers that don't support them and don't cause any further issues other than not looking as cool.

There are JavaScript solutions out there to get IE to show rounded colours, but the overhead in processing time and bandwidth isn't really worth it just for a simple design effect.

You can safely use a declaration like this:

Code:

.myCoolBorders { -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 5px solid #000; }

It'll show rounds in FireFox, Chrome and Safari and boring squared corners in IE.

Si

wardo · 11-13-2009, 07:56 AM

Just use the border radius attribute as normal and use the script found here to make it work in all browsers CurvyCorners - Beautiful rounded corners for your HTML boxes. You don't need to worry about processing overhead unless you have a huge site.

VisualWebEffects · 11-13-2009, 09:26 AM

there is other ways to make rounded corners in css rather than using attributes that are not a standard yet. the border radius attribute is nice, but not fully supported yet.

my suggestion would be to use compliant attributes to css 2.1, like this example:

Style sheet:

Code:

.tbox {
	background:#363bff; 
	color:#fff; 
	margin:0 15px; 
	width: 80%;
}

.tbox p {
	text-align: center;
}

.rtop, .rbottom {
	display:block;
	background:#fff;
}

.rtop *, .rbottom * {
	display: block;
	height: 1px;
	overflow: hidden;
	background:#363bff;
}

.r1{
	margin: 0 5px
}

.r2{
	margin: 0 3px
}

.r3{
	margin: 0 2px
}

.r4{
	margin: 0 1px;
	height: 2px;
}

Html Code:

HTML Code:

<div class="tbox">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
<p>Content here</p>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

as an alternative you can use the clip attribute if your wanting to use an image in the corners.

Kevin AKA Hubcap · 11-13-2009, 06:28 PM

Thanks for the replies.

I'm going to use border-radius for a site I'm working on now. FF and Safari users will get the rounded corners and IE will get the square.

Oh well..

Kevin

11-10-2009, 05:07 PM	#1
Kevin AKA Hubcap Flyin' Low & Slow War Room Member Join Date: Nov 2008 Posts: 1,189 Thanks: 56 Thanked 177 Times in 132 Posts	CSS Border Radius I'm wondering if anyone here is using the border radius attribute in their designs and if you are how are you getting around the incompatibility with IE. Kevin
	Make Money With Web Video Even If You Don't Have A Video Camera --->Click Here For My Free Report<---

11-11-2009, 05:14 AM	#2
AfroSamurai Warrior Member Join Date: Nov 2009 Location: Aus Posts: 10 Thanks: 1 Thanked 2 Times in 2 Posts	Re: CSS Border Radius as far as i knw this property only work in WebKit browsers and FF and still not supported by IE

11-11-2009, 07:57 AM	#3
SimonFairbairn Warrior Member Join Date: Oct 2009 Location: Manchester, UK Posts: 21 Thanks: 1 Thanked 2 Times in 2 Posts Social Networking	Re: CSS Border Radius I just don't worry about it. Browser-specific CSS declarations are just ignored by browsers that don't support them and don't cause any further issues other than not looking as cool. There are JavaScript solutions out there to get IE to show rounded colours, but the overhead in processing time and bandwidth isn't really worth it just for a simple design effect. You can safely use a declaration like this: Code: .myCoolBorders { -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 5px solid #000; } It'll show rounds in FireFox, Chrome and Safari and boring squared corners in IE. Si
	Create stunning InfoProducts mini-sites in under 10 minutes with our amazing FREE WordPress theme: http://www.infoproductstheme.com

11-13-2009, 07:56 AM	#4
wardo Active Warrior Join Date: Jan 2008 Location: Wales Posts: 80 Thanks: 7 Thanked 5 Times in 5 Posts	Re: CSS Border Radius Just use the border radius attribute as normal and use the script found here to make it work in all browsers CurvyCorners - Beautiful rounded corners for your HTML boxes. You don't need to worry about processing overhead unless you have a huge site.
	Payday Loan Lenders Direct Payday Loan Lenders

11-13-2009, 09:26 AM	#5
VisualWebEffects HyperActive Warrior War Room Member Join Date: Sep 2009 Location: Canada Posts: 137 Thanks: 4 Thanked 35 Times in 18 Posts Contact Info	Re: CSS Border Radius there is other ways to make rounded corners in css rather than using attributes that are not a standard yet. the border radius attribute is nice, but not fully supported yet. my suggestion would be to use compliant attributes to css 2.1, like this example: Style sheet: Code: .tbox { background:#363bff; color:#fff; margin:0 15px; width: 80%; } .tbox p { text-align: center; } .rtop, .rbottom { display:block; background:#fff; } .rtop , .rbottom { display: block; height: 1px; overflow: hidden; background:#363bff; } .r1{ margin: 0 5px } .r2{ margin: 0 3px } .r3{ margin: 0 2px } .r4{ margin: 0 1px; height: 2px; } Html Code: HTML Code: <div class="tbox"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> <p>Content here</p> <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> as an alternative you can use the clip attribute if your wanting to use an image in the corners.
	VisualWebEffects- Web Application Development, PC Software Development and Identity Design services

11-13-2009, 06:28 PM	#6
Kevin AKA Hubcap Flyin' Low & Slow War Room Member Join Date: Nov 2008 Posts: 1,189 Thanks: 56 Thanked 177 Times in 132 Posts	Re: CSS Border Radius Thanks for the replies. I'm going to use border-radius for a site I'm working on now. FF and Safari users will get the rounded corners and IE will get the square. Oh well.. Kevin
	Make Money With Web Video Even If You Don't Have A Video Camera --->Click Here For My Free Report<---