This site was moved to
teachsanjay is a tutorial site offering latest and helpful advice, tips and techniques to newbies. Teaching young developers and enhancing their skills in web development, web design and SEO.


Posted in Tutorials on February 19, 2018

I've been to many websites and I admire those who have a neat css box, to highlight or to get the user's attention.

There's another site which you can create a custom box depending on your design. Its CSS Box Element

So I will show you how to create those box

In your css style sheet

#box{ background-color:#E2EBF4; border:1px solid #A5CAEF; padding:10px; color:#315E88; font-size:11px; margin-top:10px;

You can play with the colors and margin. Here is another code to achieve the rounded corner box

-moz-border-radius:10px; -webkit-border-radius:10px;

Just add those two to the above code and you'll have a rounded corners, remember that the higher the px the rounded it'll get.

If you want a "teardrop" box effect, you can use this code

-moz-border-top-left-radius:10px; -webkit-border-bottom-right-radius:10px;

notice the top-left and bottom-right had the rounded corner while the top-right and bottom-left remains the same. You can also achieve a circle shape by using this code! :)

For further reading and additional information you can click this link and create your own set of css box.

About Author:

My name is Sanjay Khemlani, a Front End Web Developer and Graphic Artist. I love my family, I love the web, I also love beer! You can follow me on twitter, Or be my friend on facebook. See ya!

sanjay cool


I\'m not eialsy impressed. . . but that\'s impressing me! :)

February 19, 2018

Like the article? What's on your mind? Tell us!

*Comments are under moderation, Please do not re-submit.

Fixed Position Vertical Toolbox
Share to Facebook Share to Twitter Stumble It More...