css-border radius

I am trying to use the following two properties in my styles.css:

border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px r开发者_运维百科gba(0,0,0,.5); /* w3c box shadow */

It comes up with the following message.

They are not known css properties.

You get that message beacause these are css3 properties. To check it's validity use:

http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3

replace EXAMPLE.COM/STYLE.CSS with url to your css file.

If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.

an example for border-radius:

-webkit-border-radius: 5px; /* Safari and webkit  */    
border-radius: 5px; /* Opera, Chrome */ 
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */

an example for box shadow:

-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;

Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.

The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.

The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */

You can check which browser supports what on Standardista.

I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.