Web Design 1 - HTML Lesson 20 - curved Borders, Text Shadow Effect

Curved Borders

We can change the edges of a border so that they are not square using a radius definition

Here is the code I used to set the borders of my main container

#container{
width: 800px;
margin: auto;
padding: 0px;
background: #EABC77;
border-top-left-radius: 2% 2%;
border-top-right-radius: 2% 2%;
border-bottom-left-radius: 2% 2%;
border-bottom-right-radius: 2% 2%;
border-width: 20px;
border-style: solid;
border-color: #777F91;
}

Text Shadow Effect

Here is a shadow effect that I added to my heading 1 tag

h1 {
color: #474742;
text-decoration: underline;
text-indent: 25px;
font-size: 25px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-shadow: 5px 6px 6px #6E6721;

}

And here is a screenshot showing both
the curved Borders and the heading one with a shadow effect

 

There is no assignment - this is just info for you to try out for yourself.