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;         


        

Answer 1

You can use color instead of border-color which inherits the color of the border as well:

.box {
border:2px solid;
color: #000;
}

.box:hover {
color:purple;
}

See this demo here.

Answer 2

Use the :hover psuedo selector:

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

Answer 3

Very easy, just apply the selector :hover

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

JSFiddle Here for you