Question

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

e.g

.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 match the width; you should also use 50% for the border-radius. I have modified 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>