Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

View Demo Search Form

Round Circle Trick

You can create a round circle by specifying a very large value with the border-radius property. The following example uses 100px border-radius to make a round circle.

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;


Inner Shadow Effect

Specifying inset values with the box-shadow property to create a inner shadow effect. As of now, this feature is only supported by Chrome 4+ and Firefox 3.5+.

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

box shadow inset

Search Form Example

The following search form demo is created with CSS gradient, border-radius, and box-shadow with inset values (view the demo with Chrome 4+ or Firefox 3.5+). It degrades nicely in non-CSS3 browsers. View source code to learn the CSS code. If you are not familiar with CSS3, read my previous article The Basics of CSS3.

search form


1 10 11 12
  1. Taseer uddin
    Jun 20, 2012 @ 5:06 am

    That’s very nice idea of creating circle by utilizing radius feature.
    I like it.


  2. johanso
    Jul 1, 2012 @ 9:11 am

    is very good, creative things to do in html and css3, excellent


    • Maria Steaphen
      Feb 7, 2017 @ 3:22 am

      Nice post about html and css3, its very excellent. And thanks for sharing this..,,.


  3. asd
    Jul 19, 2012 @ 1:02 am



  4. asdasd
    Jul 19, 2012 @ 6:52 am



  5. Dan
    Jul 26, 2012 @ 3:05 am

    Really cool, although the button needs a hover state, active state and ideally a spinner on click, I’m just adding this now :)


  6. Tech Support Guy
    Sep 19, 2012 @ 10:42 pm

    Great write up. Our website is getting a bit large and unfortunately its time for a search box…..just not sure how its going to fit into the design. Thx again.


  7. walif
    Nov 23, 2012 @ 9:21 pm

    nice and attractive design code.


  8. ao cuoi
    May 24, 2013 @ 4:51 am

    tks for sharing!!!


  9. fauzi
    May 27, 2013 @ 8:42 pm

    Thanks, awesome tutorial.


  10. Afzal
    May 29, 2013 @ 10:44 am

    Your post is just awesome :)
    It is so informative :)
    Thanks for sharing :)


  11. shut off power
    Dec 25, 2016 @ 11:40 pm

    Hiya very nice web site!! Man .. Beautiful ..

    Wonderful .. I will bookmark your website and take
    the feeds also?I am satisfied to seek out a lot of useful info here in the put up,
    we want develop extra strategies in this regard, thanks for sharing.


1 10 11 12

Leave a Reply