| Tweet |
|
But using standard CSS3 and browser specific attributes, you can add rounded borders quite safely. As usual IE was the bad guy that was not supporting rounded corner CS3 style attributes until recently. Ultimately IE 9 also supporting rounded corners. You may wonder if your web page is viewed by older browser, what will be the result. Not a big issue, it will be displayed as normal square boundaries.
So I would suggest not to overuse exagerated rounded corners right now, rather design your web pages using gentle rounded corners so that those old people using old browsers are not too much peanalised. :-)
There are enough resources to learn using rounded corner borders. I will be just sharing simple and straightforward example that work in all the latest browsers. (I have tested this with FF 5, Chrome 12, Safari 5 and IE 9.)
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<style>
#wrapper {
background: #eaeaea;
border-radius: 10px 10px 10px 10px;
}
</style>
<div id="wrapper">
Some Text <br />
Some Text <br />
Some Text <br />
Some Text <br />
</div>
</body>
</html>
More details available in following links;
http://davidwalsh.name/css-rounded-corners
http://www.css3.info/preview/rounded-border/
0 comments:
Post a Comment