HTML and CSS Reference
In-Depth Information
<section>
<div id=cta>Click Here</div>
</section>
</div>
</body>
</html>
Adding the CSS properties for border radius (in boldface type in Listing 5-7) and refreshing your browser will add
a 10-pixel rounded corner to our ad element. The border radius syntax is fairly simple: all you need do is pass it a value
(in pixels) you want to round. You can see the effect in Figure
5-7
.
Figure 5-7.
Our ad with rounded borders using CSS3
■
Border radius can be adjusted independently instead of all four corners at the same time. this could be helpful
Note
Gradients
CSS3 now offers gradients, which are another feature of the spec that allows designers to lay off the images and take
advantage of the browser's graphics natively. As you learned using gradients with the
canvas
element, it allows the
definition of a linear or radial color gradient via JavaScript. Now with our CSS syntax, we can do similar things without
touching our script files. Let's add a gradient to our ad example by making our CTA more of a button with style (see
Listing 5-8).
Listing 5-8.
Gradient CSS3 Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
