CSS border-radius code
Use border-radius when you want to make sharp corners round.
<!DOCTYPE html>
<html>
<head>
<title>CSS border-radius example</title>
<style>
div {
width: 300px;
padding: 20px;
background-color: lightblue;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>Box with round corners</h1>
<div>
This box has round corners.
</div>
</body>
</html>Try it yourself.
Change 20px to another number, like 5px or 50px.
Change the text inside the <div>.
CSS box-shadow code
Use box-shadow when you want to add a shadow behind an element.
<!DOCTYPE html>
<html>
<head>
<title>CSS box-shadow example</title>
<style>
div {
width: 300px;
padding: 20px;
box-shadow: 5px 5px 10px gray;
}
</style>
</head>
<body>
<h1>Box with shadow</h1>
<div>
This box has a shadow behind it.
</div>
</body>
</html>
Try it yourself.
Change 5px 5px 10px to different numbers.
Change gray to another color, like black or lightblue
