HTML and CSS Reference
In-Depth Information
border-radius
property is not supported by all browsers. However, several
browser manufacturers have added proprietary CSS properties to set border
corners. hese are
-moz-border-radius
for Mozilla browsers such as Firefox,
and
-webkit-border-radius
for Webkit browsers (Safari and Chrome). Inter-
net Explorer does not support
border-radius
as of IE version 8. Authors are
encouraged to use all proprietary properties when coding CSS for rounded
corners for the best results across all browsers. For example:
p.welcome {
border: medium solid blue;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
}
Example 3.15 demonstrates the creation of borders with rounded corners
for browsers built on the Mozilla engine, such as Firefox. Figure 3.15 shows
how the HTML is displayed on the Firefox browser.
Example 3.15: HTML for borders with rounded corners
<!DOCTYPE html>
<html>
<head>
<title>Example 3.15</title>
<style type="text/css">
body { font: 9pt Tahoma,Verdana,sans-serif; padding: 1em; }
p { padding: 1em; background-color: #ddd; }
</style>
</head>
<body>
<p style="border: 2px solid; -moz-border-radius: 10px;">
border: 2px solid;<br/>-moz-border-radius: 10px;
</p>
<p style="border: 6px outset; -moz-border-radius: 6px;">
border: 6px outset;<br/>-moz-border-radius: 6px;
</p>
<p style="border: 6px dashed; -moz-border-radius: 10px;">
border: 6px dashed;<br/>-moz-border-radius: 10px;
</p>
</body>
</html>
