Authors:
Anne Boehm, Zak Ruvalcaba
Chapter:
How To Use The Css Box Model For Spacing, Borders, And Backgrounds
Exercise:
Exercises
Question:2 | ISBN:9781890774837 | Edition: 3
Question
Exercise 5-2
Add rounded corners and box shadows to the Speakers heading
Use CSS to add a double border with rounded corners and box shadows to the Speakers heading so it looks like this:
This should work in both Chrome and IE.
Answer
The following css properties are used to add the above styles to the heading:
/* double border */
border-style: double;
/* rounded corners */
border-radius: 15px;
/* box shadows */
box-shadow: 5px 5px;
The complete code is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sp-heading {
/* Basic Properites for alignment of heading */
font-family: Arial;
width: 500px;
height: 30px;
padding: 15px;
padding-left: 50px;
/* double border */
border-style: double;
/* rounded corners */
border-radius: 15px;
/* box shadows */
box-shadow: 5px 5px;
}
</style>
</head>
<body>
<!--- Speaker heading -->
<h2 class="sp-heading">This season's guest speakers</h2>
</body>
</html>
Output:
