How to apply effects to a specific HTML tag?

Question

css

I'm using Bootstrap 3. I want to put an effect on a 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>
СSS
#cool_slider .carousel-control span:hover{
  border-radius:10px;
  border:1px solid red;
} ( хочу взять шеврон  в кружок бордером )

If you impose on a span by class, then it works crookedly, the border and other styles are not displayed as they should. Can you please recommend the best and correct way to implement CSS overlay on the tag?

Answer 1

Few details.
If so as I think then...
The height and width of the element should be the same + border-radius: 50%;
For example

height: 30px;
width: 30px;
border-radius: 50%;
border: 1px solid #fff;

Answer 2

border at first write without hover