Viewing Thread:
"CSS Rounded Corners - a feature you may not be familiar with!!!"

[B][U]CSS Rounded Corners - a feature you may not be familiar with!!![/U][/B]

Cascading Style Sheets, more commonly known as simple CSS, have been a part of the web for a long, long time (unless you’re Microsoft), and know doubt a few people who read this particular forum, or host web sites with Freeola with either knowingly or unknowingly be using CSS on their pages. CSS is the preferred way do "design" web site layouts, leaving the HTML to merely "mark-up" its meaning.

This little article is aimed at those who know what CSS is, and have used it in the past and present. You may have changed your fonts, your colours, your background images, but there is one feature that you may not be familiar with, but once you known about it, may very well fall off your chair with excitement ... or perhaps not, but I’m going to share this one feature with you, weather you like it or not, so there!

Because this is aimed at people who know about CSS, even if it’s just the basics, I’ll not expand too much on any given property, as hopefully you’ll see how it works quite quickly… yes, even you Machie.

Not All Web Browsers Are Equal!!!

Before going any further, the feature I’m going to mention is not “cross-platform" (yet) – it might work in one browser but not another, while other browsers might require different CSS code to make the same action occur.

Those of you know anything about the history of Microsoft’s Internet Explorer web browser won’t be surprised to learn that this feature isn’t supported at all (again, I say yet).

As this is a visual effect feature, i.e. the way the web site looks to people, you can get away quite easily with the fact that it’ll work in one browser and not another. It’s just a case of your own judgement as to weather you think the feature is worth adding for 25% or so of your potential visitors from seeing.

Browser Specific CSS!!!

Some web browsers support a feature to set CSS to be aimed at only that browser for certain CSS properties, which are usually previews of future CSS settings. This is done by adding the browser name / rendering engine name to the front of the CSS setting you’re using, being preceded with a dash to indicate it is browser specific, for example:

[B]-moz-[/B]property: value;
[B]-webkit-[/B]property: value;
[B]-ms-[/B]property: value;


The first example is targeted to the rendering engine of Mozilla Firefox, the second to Apple Safari & Google Chrome, and the third to Microsoft Internet Explorer. Others exist, but those are the four web browsers you’re most likely to be familiar with. Chrome and Safari use the same rendering engine, called webkit, though at any one time they may be using different versions, so keep an eye out.

The use of a dash before any CSS property is an official method in CSS, to allow previews to be implemented early for real world examples of future CSS settings, so don’t worry if a CSS validator tells you otherwise – the validator is, ironically, invalid in this case, even the W3C one, so don’t be concerned, unless you’re really in to your CSS valid icons. Using CSS 3 may also produce a CSS warning, but that’s because CSS 3 isn’t completed yet.

Okay, lets get in to the example of a feature you might like, but don’t know it yet.

CSS Rounded Corners!!

As the title may suggest, the CSS feature I want to show you is the proposed CSS 3 feature Rounded Corners. This feature will enable a web site author to created curved corners on any visual border.

For example, currently, if you have a <div> element, and use CSS to set the border to be 7px, coloured red, and to have a solid line design, the border will look like a box / rectangle shape, with all four corners connecting at right-angles.

Web designers for a long time have wanted to be able to make these corners a little more visually appealing, and less "blocky", and so for a while have been using techniques that involve the use of multiple images floating in the corner, or multiple HTML elements with different background images to make the corners curvy.

To make this unnecessary, CSS 3 hopes to include this type of design feature. Some web browsers already implement a preview of the feature, meaning web sites can make the corners round with a little CSS code, rather than using multiple images.

The preview feature is currently available in Firefox, Safari & Chrome, which make up about 25% of web traffic, give or take a % or two (or three, 4 perhaps ….). Opera & Internet Explorer don’t support this feature as yet, though Internet Explorer 9 will (it’s in the IE9 alpha build), as I’m sure will Opera sooner or latter.

How A Rounded Corner Is Defined!!!

The CSS 3 setting for this will be known as the border-radius group, and the value(s) for this will be a radius length (e.g. pixels) of the desired curve dimensions. A radius is the length from the centre point of a circle to the edge, and as such you can set the two points that the corners start to curve, starting from the corner point.

The first length value works from the corner point, and moves horizontally, while the second value starts from the corner point and moves vertically. Then the two points are marked as the radius point, and a curve is drawn between the two, creating the effect, If the two length values are the same, then an even curve is drawn, while two different lengths will cause the oppose effect.

Perhaps that is a tad confusing, and that is no surprise, as it’s not easy to get without any diagrams or visual aids, so now would be a good time to dive in to an example.

We’ll stated with a basic <div> element, with an <h2> and a <p> element of text inside it, and give it a border, so our little bit of HTML come may look like this:

<div>
<h2>A page heading</h2>
<p>some text</p>
</div>

and our little CSS to set the standard border looking like this:

<style type="text/css">
div {
border: 7px red solid;
}
</style>

To created a rounded corner for our new box, each of the four corners of our <div> has its own CSS property, and to jump right in, here is an example of how each corner might be defined.

<style type="text/css">
div {
border: 1px red solid;

[B]border-top-left-radius: 5px 5px;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 35px 35px;[/B]
}
</style>

The top left corner will have a radius pinned 5 pixels from the top and side, and the browser will create the curve from this point. Because the radius is not far from the border, the curve is hard to see. The top right radius is a little bigger, as is the bottom right and bottom left bigger still.

While the CSS 3 setting will use the shorthand border-radius, only Google Chrome recognises this at this time, and Safari & Firefox, require their own settings to be included. These settings are called [B]-moz-[/B]border-radius (for Firefox) & [B]-webkit-[/B]border-radius (for Safari). Because Chrome also recognises the Safari code, you could just use this for the time being if you want to save a little bandwidth.

For Apple Safari (Google Chrome also recognises this) the CSS code for rounded corners looks like:

<style type="text/css">
div {
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;
}
</style>

And for Firefox, the CSS code for rounded corners looks like:

<style type="text/css">
div {
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

The reason the Firefox code is quite different is because it has existed for quite some time, and therefore doesn’t follow the more recent proposed CSS 3 property. Mozilla will no doubt correct this when CSS 3 is close to completion. It can also be expected that Safari will follow Chrome sometime soon and use the standard border-radius property, without the need for the -webkit- bit at the beginning.

So all put together in a single <style> declaration, we could use the following CSS to define a rounded corner for Google, Firefox & Apple web browsers:

<style type="text/css">
div {
border: 7px red solid;

-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;

-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

Take a look if you have Chrome, Firefox or Safari installed – it’ll better highlight what the above code can do once you’ve seen the end result.

A second example is included in the above link to show the look if you use different length values on the same corner, for example:

<style type="text/css">
div {
border-top-left-radius: [B]15px 35px[/B];
border-top-right-radius: 25px 45px[/B];
border-bottom-right-radius: [B]35px 75px[/B];
border-bottom-left-radius: [B]245px 185px[/B];
}
</style>

Why Not Give It A Try???

As I mentioned, it’s currently a feature the might not be seen by many people, but if you want to have some rounded corners, and haven’t yet used any other method to do so, you can now at least let some of your visitors enjoy a visual treat or two!!!

Well?? Go for it!!!

Johnny 5. Data. INPUT! Powering down

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Sonic Chris wrote:
> Are you joking?! It only takes one technical post, and all the
> reviews are out the window! lol

Are you joking?! :¬P

This and this both Freeola product related failed to beat some game post!

As Freeola are an ADSL and Web Hosting company (to me!) they still seem to be more focused on Gaming which was part of their past...

But I'm not bitter! ;¬)
People, please don't get upset as it's only my opinion (which isn't worth much) and it's not my intention to offend!
[s]Hmmm...[/s]

Hmmm... wrote:
> Nice post - I hope it gives the computer games people a
> run for their money ;¬)

Are you joking?! It only takes one technical post, and all the reviews are out the window! lol

Bah we focus on everything. No one gets priority over anyone else ;)

And to be honest, I'd say about 90% of the time a web/technical article goes up against 1/2 game reviews, we all know who wins..... although it's mainly because cjh is just too good at writing things :)

Tweeted twice? That is nice, thanks :)

cjh wrote:
> I didn't even know Freeola had a Twitter account - that must be
> the first time I've ever been mentioned in a tweet, I do feel
> honoured :)


...and the second time was here: @HmmmUK!

Maybe you'll change your mind when IE 9 is out?? :)

I didn't even know Freeola had a Twitter account - that must be the first time I've ever been mentioned in a tweet, I do feel honoured :)

cjh wrote:
> As always, any comments are welcome.

Hi cjh,
As you point out this doesn't work with IE - so for me I think I'll stick with using images for my rounded corners! ;¬)

My 'standards' are very low(!) especially on my play site. But I'm put off using anything that doesn't work with IE as that's still most people (as you mentioned in your post).

Out of interest I just checked my visitors browser usage on my Hmmm... site. Last month I had around 22,000 visitors with 7,500 not using IE. Probably higher than I thought it would be.

But for me I'll let others be 'bleeding edge' and I'll take my head out of the sand when things like this work across all browsers - obviously after waiting a few more years for people to upgrade to the latest version! :¬P

Nice post - I hope it gives the computer games people a run for their money ;¬)

NB. Did you see Freeola tweeted about you last week?
[s]Hmmm...[/s]

[B][U]CSS Rounded Corners - a feature you may not be familiar with!!![/U][/B]

Cascading Style Sheets, more commonly known as simple CSS, have been a part of the web for a long, long time (unless you’re Microsoft), and know doubt a few people who read this particular forum, or host web sites with Freeola with either knowingly or unknowingly be using CSS on their pages. CSS is the preferred way do "design" web site layouts, leaving the HTML to merely "mark-up" its meaning.

This little article is aimed at those who know what CSS is, and have used it in the past and present. You may have changed your fonts, your colours, your background images, but there is one feature that you may not be familiar with, but once you known about it, may very well fall off your chair with excitement ... or perhaps not, but I’m going to share this one feature with you, weather you like it or not, so there!

Because this is aimed at people who know about CSS, even if it’s just the basics, I’ll not expand too much on any given property, as hopefully you’ll see how it works quite quickly… yes, even you Machie.

Not All Web Browsers Are Equal!!!

Before going any further, the feature I’m going to mention is not “cross-platform" (yet) – it might work in one browser but not another, while other browsers might require different CSS code to make the same action occur.

Those of you know anything about the history of Microsoft’s Internet Explorer web browser won’t be surprised to learn that this feature isn’t supported at all (again, I say yet).

As this is a visual effect feature, i.e. the way the web site looks to people, you can get away quite easily with the fact that it’ll work in one browser and not another. It’s just a case of your own judgement as to weather you think the feature is worth adding for 25% or so of your potential visitors from seeing.

Browser Specific CSS!!!

Some web browsers support a feature to set CSS to be aimed at only that browser for certain CSS properties, which are usually previews of future CSS settings. This is done by adding the browser name / rendering engine name to the front of the CSS setting you’re using, being preceded with a dash to indicate it is browser specific, for example:

[B]-moz-[/B]property: value;
[B]-webkit-[/B]property: value;
[B]-ms-[/B]property: value;


The first example is targeted to the rendering engine of Mozilla Firefox, the second to Apple Safari & Google Chrome, and the third to Microsoft Internet Explorer. Others exist, but those are the four web browsers you’re most likely to be familiar with. Chrome and Safari use the same rendering engine, called webkit, though at any one time they may be using different versions, so keep an eye out.

The use of a dash before any CSS property is an official method in CSS, to allow previews to be implemented early for real world examples of future CSS settings, so don’t worry if a CSS validator tells you otherwise – the validator is, ironically, invalid in this case, even the W3C one, so don’t be concerned, unless you’re really in to your CSS valid icons. Using CSS 3 may also produce a CSS warning, but that’s because CSS 3 isn’t completed yet.

Okay, lets get in to the example of a feature you might like, but don’t know it yet.

CSS Rounded Corners!!

As the title may suggest, the CSS feature I want to show you is the proposed CSS 3 feature Rounded Corners. This feature will enable a web site author to created curved corners on any visual border.

For example, currently, if you have a <div> element, and use CSS to set the border to be 7px, coloured red, and to have a solid line design, the border will look like a box / rectangle shape, with all four corners connecting at right-angles.

Web designers for a long time have wanted to be able to make these corners a little more visually appealing, and less "blocky", and so for a while have been using techniques that involve the use of multiple images floating in the corner, or multiple HTML elements with different background images to make the corners curvy.

To make this unnecessary, CSS 3 hopes to include this type of design feature. Some web browsers already implement a preview of the feature, meaning web sites can make the corners round with a little CSS code, rather than using multiple images.

The preview feature is currently available in Firefox, Safari & Chrome, which make up about 25% of web traffic, give or take a % or two (or three, 4 perhaps ….). Opera & Internet Explorer don’t support this feature as yet, though Internet Explorer 9 will (it’s in the IE9 alpha build), as I’m sure will Opera sooner or latter.

How A Rounded Corner Is Defined!!!

The CSS 3 setting for this will be known as the border-radius group, and the value(s) for this will be a radius length (e.g. pixels) of the desired curve dimensions. A radius is the length from the centre point of a circle to the edge, and as such you can set the two points that the corners start to curve, starting from the corner point.

The first length value works from the corner point, and moves horizontally, while the second value starts from the corner point and moves vertically. Then the two points are marked as the radius point, and a curve is drawn between the two, creating the effect, If the two length values are the same, then an even curve is drawn, while two different lengths will cause the oppose effect.

Perhaps that is a tad confusing, and that is no surprise, as it’s not easy to get without any diagrams or visual aids, so now would be a good time to dive in to an example.

We’ll stated with a basic <div> element, with an <h2> and a <p> element of text inside it, and give it a border, so our little bit of HTML come may look like this:

<div>
<h2>A page heading</h2>
<p>some text</p>
</div>

and our little CSS to set the standard border looking like this:

<style type="text/css">
div {
border: 7px red solid;
}
</style>

To created a rounded corner for our new box, each of the four corners of our <div> has its own CSS property, and to jump right in, here is an example of how each corner might be defined.

<style type="text/css">
div {
border: 1px red solid;

[B]border-top-left-radius: 5px 5px;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 35px 35px;[/B]
}
</style>

The top left corner will have a radius pinned 5 pixels from the top and side, and the browser will create the curve from this point. Because the radius is not far from the border, the curve is hard to see. The top right radius is a little bigger, as is the bottom right and bottom left bigger still.

While the CSS 3 setting will use the shorthand border-radius, only Google Chrome recognises this at this time, and Safari & Firefox, require their own settings to be included. These settings are called [B]-moz-[/B]border-radius (for Firefox) & [B]-webkit-[/B]border-radius (for Safari). Because Chrome also recognises the Safari code, you could just use this for the time being if you want to save a little bandwidth.

For Apple Safari (Google Chrome also recognises this) the CSS code for rounded corners looks like:

<style type="text/css">
div {
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;
}
</style>

And for Firefox, the CSS code for rounded corners looks like:

<style type="text/css">
div {
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

The reason the Firefox code is quite different is because it has existed for quite some time, and therefore doesn’t follow the more recent proposed CSS 3 property. Mozilla will no doubt correct this when CSS 3 is close to completion. It can also be expected that Safari will follow Chrome sometime soon and use the standard border-radius property, without the need for the -webkit- bit at the beginning.

So all put together in a single <style> declaration, we could use the following CSS to define a rounded corner for Google, Firefox & Apple web browsers:

<style type="text/css">
div {
border: 7px red solid;

-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;

-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

Take a look if you have Chrome, Firefox or Safari installed – it’ll better highlight what the above code can do once you’ve seen the end result.

A second example is included in the above link to show the look if you use different length values on the same corner, for example:

<style type="text/css">
div {
border-top-left-radius: [B]15px 35px[/B];
border-top-right-radius: 25px 45px[/B];
border-bottom-right-radius: [B]35px 75px[/B];
border-bottom-left-radius: [B]245px 185px[/B];
}
</style>

Why Not Give It A Try???

As I mentioned, it’s currently a feature the might not be seen by many people, but if you want to have some rounded corners, and haven’t yet used any other method to do so, you can now at least let some of your visitors enjoy a visual treat or two!!!

Well?? Go for it!!!

Johnny 5. Data. INPUT! Powering down

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.