How to apply effect on a specific HTML tag?

I am using Bootstrap 3. I want to apply the effect on the tag.
Here is an example code:
<a href="#cool_slider" class="left carousel-control" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
</a>
CSS
#cool_slider .carousel-control span:hover{
border-radius:10px;
 border:1px solid red;
} ( I want to take the Chevron in a circle border )

If applied on a span in class, it is crooked, border and other styles display as necessary. Please recommend how to better and properly implement the overlay CSS for the a tag?
July 9th 19 at 10:57
2 answers
July 9th 19 at 10:59
Solution
Little details.
If so I think that...
The height and width of the element must be the same + border-radius: 50%;
For example
height: 30px;
width: 30px;
border-radius: 50%;
border: 1px solid #fff;
All the same climbs Chevron a little over the field, can put it in another class? Its depoist...
#cool_slider .carousel-control:hover span{
transform:scale(1.5);
height: 30px;
width: 30px;
border-radius: 50%;
border: 1px solid #fff;
} - jaycee commented on July 9th 19 at 11:02
All done, it was necessary to make sizes publishe - jaycee commented on July 9th 19 at 11:05
July 9th 19 at 11:01
the first border without hover list

Find more questions by tags JavaScriptHTMLjQueryBootstrapCSS