topical media & game development
professional-web-02-css-rounded-corners.htm / htm
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rounded Corners</title>
<style type="text/css">
body {
font-family: verdana, sans-serif;
font-size: 12px;
}
.rounded {
text-align: center;
background: #ffcc66;
margin-top: 1em;
}
</style>
<script type="text/JavaScript"
src="rounded_corners.js"></script>
<script type="text/JavaScript">
window.onload = function() {
var settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
};
var cornersObj = new curvyCorners(settings, "rounded");
cornersObj.applyCornersToAll();
}
</script>
</head>
<body>
<div class="rounded">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.