CSS Change Border Color on Hover

Question

I'm using the following CSS code to create a box around some content/links:

.box {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;  
    border: 2px solid #000000;
    padding: 5px 40px; 
    background: #ffffff;
}

I want to make it so that when the mouse cursor hovers over the box, the black border color changes to purple.

Answer 1

Use the :hover psuedo selector:

.box:hover {
   border-color: purple;
}

Answer 2

Very easy, just apply the selector :hover

.box:hover {
    border:5px solid #b217b4;
}

JSFiddle Here for you