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

Curve corners with shadow in HTML using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1803  View(s)
Rate this:

Curve corners with shadow in HTML using CSS3

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:


Don't want to miss updates? Please click the below button!

Follow MindStick