Windows 7 Forums

Welcome to Windows 7 Forums. Our forum is dedicated to helping you find support and solutions for any problems regarding your Windows 7 PC be it Dell, HP, Acer, Asus or a custom build. We also provide an extensive Windows 7 tutorial section that covers a wide range of tips and tricks.


Windows 7: The CSS Corner: About CSS corners

19 Mar 2010   #1
SGT Oddball

 
The CSS Corner: About CSS corners

Quote:
The first time we used ‘The CSS Corner’ as a general blog post heading, Chris Wilson sent this feedback: “Many readers will think the post is about border-radius”. The very first comment proved him right within hours.

Today, CSS Corner is about the border-radius property, by far the most heavily requested feature of the CSS3 Backgrounds & Borders module.

A factor behind this popularity is its pervasive role in styling the ‘chrome’ of a web application. Making modern, visually attractive tabs, dialogs, custom button controls, even super-awesome button controls is much harder if the only available corner shape is square. Quite literally rounding the edges of web app UIs to give them a more polished or even desktop-app look was important enough for authors to fall back on using table layouts and images to achieve the desired effects across all browsers. A wealth of individual requirements and experimentation spawned countless blog posts, a dedicated Javascript library and even a number of jQuery plugins.

A Long Time Coming

First specified back in 2002, border-radius was already supported by Firefox 1.0 in 2004 as –moz-border-radius. Almost three years later, Safari 3.0 followed with –webkit-border-radius. In December 2009, the specification became a Candidate Recommendation. A few weeks ago, Opera’s 10.50 release was the first to add support the property without a vendor prefix. The first IE9 Platform Preview Build released at MIX 2010 also supports border-radius. Within months, a single border-radius declaration will work interoperably in all the latest browser releases.

Getting It Right

Addressing well-known use-cases is always a primary goal. But the two borders connected by a CSS box corner can also be styled e.g. using dashes or dots which should follow the specified curve. Each border may also use a different style, width or even color. Getting all the permutations right – producing the result expected by the author, as defined by the specification – across the ranges of each variable has been a particular challenge for browsers.

Consider dotted borders of varying widths with rounded corners; which of the following renderings is likely to reflect the intent of most authors?

Each blue box above is a screenshot of the same simple testcase as rendered in a different browser. IE9’s rendering is at the bottom right. (The image links to the testcase).

For a solid border of variable width with the same corner radii, IE9 gives the rendering at right:

Cross-browser agreement on the rendering of more creative border geometries enabled by this new feature remains to be achieved:

IE9’s rendering is also the rightmost above.

Future challenges include interoperable corner gradients; when a rounded corner connects border of different colors, modern browsers will typically display something like:

While the specification defines the exact position of the transition line between the color areas, an interoperable and testable definition for a color gradient along the curve remains to be defined. If you are a web author with feedback or thoughts on the matter, the CSS Working Group would love to hear from you at www-style@w3.org.

border-radius in the IE9 Platform Preview Build

Our first preview build includes full support for the property as currently defined, including shorthand and longhand syntax, as well as the corresponding DOM properties.

As CSS3 Backgrounds & Borders has reached Candidate Recommendation, the property name is not prefixed with –ms.

A Call To Action

While a number of web pages already make use of this feature, some, such as the superawesome button demo page, do not render properly in IE9 or Opera 10.50 because they lack an unprefixed declaration of the border-radius property. As the specification nears Recommendation and browser vendors are working on their final implementations and testcases for submission to the W3C, we recommend that new content always include a border-radius declaration without vendor prefix.

We are looking forward to hearing your feedback!

Sylvain Galineau
Program Manager

More...


My System SpecsSystem Spec
.
Reply

 The CSS Corner: About CSS corners




Thread Tools




Similar help and support threads
Thread Forum
Hot Corners App
Hot Corners This app I made for fatedquest, but I thought I would share it with everyone. What it does is it lets you set anything you can run (programs, files, directories, websites, control panel items, etc.) to be ran when you put your mouse at any one of the four corners of the...
Customization
Hot Corners for Windows
Is there a good program that gives Windows 7 the Hot Corners function, ie. when you move the mouse to a corner of the screen, an action will be performed. Similar to Aero Peek, but I want it for the 3 other corners of my screen. I used this program, but sadly it has very limited actions....
Customization
Hot corners (Mac OS X feature)
Just moved back from Mac OS X to Windows after 4 years, can't get out of the habit of using hot corners. It's a handy feature on Mac OS X for flicking between windows, dropping stuff onto and picking stuff off the desktop, activating sleep mode. Windows 7 has one hot corner on the bottom right,...
General Discussion
How do I disable the snowy Aero corners
Hey guys, I was lurking around here and already found solutions to some of my "problems". I want to have the top of the windows simply black. It's almost done, I'm just missing those corners. They just stay snowy. My questions is, how I can disable this within the registry, I am not a friend of...
Customization
A Way to change default corners?
is there a way in win7 ultimate to change the corners of the windows,start menu,the icons of the opened windows in the superbar e.t.c from rounded to squared?
Themes and Styles
How can I change the corners of windows ?
Picture No 1 shows how it looks at the moment. Picture No 2 shows the edges being sharp. Would you know if there's a tweak for that ? Thank you
Customization


Our Sites

Site Links

About Us

Find Us

Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd

All times are GMT -5. The time now is 16:16.

Twitter Facebook Google+



Windows 7 Forums

Seven Forums Android App Seven Forums IOS App