There is such CSS code:

 i { background: $active_blue; @include border-radius(10px); color: $light_blue; font: $main_font; font-size: 10px; position: absolute; padding:1px 7px 3px; display: block; top: 26px; left: 6px; }

and HTML :

 <i class="count_orders">1</i>

I work in Mozilla, formatting it accordingly. In reality, this is a circle with a number inside. But in Mozille, it is really a circle, but in Chrome it is some kind of melon. Why is that? Styles are discarded at the beginning.

    1 answer 1

    The circle must have a specified height and width in order to correctly calculate the rounding. Otherwise, the block may stretch, and then it will not be proportional. padding: n expands the circle from the inside. Experiment.

    The direct circle is obtained only with the participation of these teams:

     i { /* Важные в закруглении */ border-radius: 50%; height: 10px; width: 10px; padding: 20px; /* Побочные команды */ font-size: 13px; position: absolute; display: block; margin: 0; color: white; background: blue; } 
     <i class="count_orders">1</i>

    IMPORTANT!

    padding must be one number from all sides, otherwise the circle will not be even. Or it is necessary to change the width , height which is not quite correct.

    The answer is approximately as follows (of the important properties):

     i { @include border-radius(50%); width: 10px; height: 10px; padding: 10px; }
    • Everywhere is it necessary to use a fixed height and width if I use paddings? - Nikita Shchypylov
    • @ Nikita Schipilov well, the proportions should be the same. And yes to use fixed - Vasily Barbashev
    • Barabashev is not, did not work (Padding removed and in Chrome the figure jumped up - Nikita Shchypylov
    • @ Nikita Schipilov well, without padding, you will have no indent from the edges. - Vasily Barbashev