How to enlarge a circle with increasing text inside a circle?

Question

I want to have text inside a circle. Is it possible to dynamically increase the size of a circle when increasing text?
This is an example .
But the problem for me in this example is that only the width increases along with the text.

eg

.badge { background: radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -o-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background-color: red; border: 2px solid white; border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */ box-shadow: 1px 1px 1px black; color: white; font: bold 15px/13px Helvetica, Verdana, Tahoma; height: 16px; padding: 4px 3px 0 3px; text-align: center; min-width: 14px; } /* only needed for this sample */ .badge { float: left; left: 25px; margin: 6px; position: relative; top: 25px; } 

 <div class="badge">1</div> <div class="badge">2</div> <div class="badge">3</div> <div class="badge">44</div> <div class="badge">55</div> <div class="badge">666</div> <div class="badge">777</div> <div class="badge">8888</div> <div class="badge">9999</div> 

Answer 1

I think you need to use javascript to adjust the height to fit the width; You should also use 50% for the border radius. I changed your example .

 $(document).ready(function(){$('.badge').each(function(){ $(this).height($(this).width()); $(this).css('line-height', $(this).height()+'px'); })}); 

 .badge { background: radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -o-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px ); background-color: red; border: 2px solid white; border-radius: 50%; /* one half of ( (border * 2) + height + padding ) */ box-shadow: 1px 1px 1px black; color: white; font: bold 15px/13px Helvetica, Verdana, Tahoma; height: 16px; padding: 3px; text-align: center; min-width: 16px; } /* only needed for this sample */ .badge { float: left; left: 25px; margin: 6px; position: relative; top: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="badge">1</div> <div class="badge">2</div> <div class="badge">3</div> <div class="badge">44</div> <div class="badge">55</div> <div class="badge">666</div> <div class="badge">777</div> <div class="badge">8888</div> <div class="badge">9999</div>