blog

Home / DeveloperSection / Blogs / Curve corners with shadow in HTML using CSS3

Curve corners with shadow in HTML using CSS3

Vijay Shukla3423 15-Dec-2012

In this blog I am creating a HTML application using CSS3, here this application I will create a Curve border image without using any photo editing software and also set the shadow of that image.

Below is code for creating the curve border image:

<!DOCTYPE html> 
<html>
<head>
<style>
div
{
   border:2px solid #a1a1a1;
   padding:10px 40px;
   background:#CD853F;
   width:300px;
   border-radius:50px;
   box-shadow: 10px 10px 5px #888888;
}
p
{
    font-weight:bold;
    color:#D3D3D3;
    font-size:20px;
}
</style>
</head>
<body>
<div><p>mindstick©</p> <font size="3" color=#D3D3D3> Unleash your Imagination</font></div>
</body>
</html>

div

this tag is set the style of the background. By the help of border-radius: we can create the curve border and   box-shadow attribute is use for give the shadow of that image.

After showing this application on the browser we get below result:

Curve corners with shadow in HTML using CSS3

Updated 18-Sep-2014

Leave Comment

Comments

Liked By