Make Rounded Corners & Shadows With CSS

For rounded corners of a bordered element:


Code Snippet


<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property adds rounded corners to elements with radius as specified.</div>
</body>
</html>

The result of the above code:





For creating a shadow effect on an element or on text:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 2px #4b3737;}
div
{
width:300px;
height:100px;
background-color:ffb400;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<h1>shadow effect on TEXT</h1>
<p><b>Note:</b>
Internet Explorer 9 and earlier do not support the text-shadow property.</p>
<div> shadow effect on any box model element</div>
</body>
</html>

The result of the above code:





Guys follow the various other tutorials to catch on further in CSS coding and designing!!!