CSS code challenge Help me out on this please.

Okay. Here's the css that they gave us to start:

.box {
    border-radius: 15px;
    background: #4682B4;
 }

.box:hover {
    background: #F08080;
    border-radius: 50%;
}

Okay. The border-radius on our .box div is 15px. That just gives each corner of our box a little 15 pixel curve.

The border-radius when a user hovers their cursor over the .box div ( .box:hover ) is 50%. That turns our square box into a circle. Review here: http://teamtreehouse.com/library/css-foundations/backgrounds-and-borders/border-radius-3 if needed.

Right now, if a user hovers their cursor over the .box div, there is no smooth transition. It just instantly flashes from being a box with slightly rounded corners to being a circle. You can go to the preview and check that out, if you want.

So, they want us to style the .box div so that if it's asked to transition from { border-radius: 15px } to something else, it shouldn't just instantly flash to the new styling.

In long-hand, we could do it this way.

Code Challenge: using the prefix for webkit based browsers, create a transition for the border-radius property of .box

.box {
      -webkit-transition-property: border-radius;
}

give the transition a duration of 2s

    -webkit-transition-duration: 2s;

a delay of 1s

    -webkit-transition-delay: 1s;

and a timing function that maintains a linear motion.

-webkit-transition-timing-function: linear;

But we can put all this into one line. So here's the answer with the stuff that they already had in there for us.

.box {
  border-radius: 15px;
  background: #4682B4;
 -webkit-transition: border-radius 2s linear 1s;
}

Again, you can go to the preview and check out the smooth transition from square to circle.

Hi Gary, I was able to get it to work finally. Beautiful job explaining that.