css make responsive oval block - css

Question

I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the first block I succeed to do second was not like in image with border-radius: 50%
So my question is it possible to make such result with one class block or for each button (left | right) I need to write special class for each block ?

Answer 1

For ellipse use 100%:
border-radius: 100%;
For stadium use big value in px:
border-radius: 9999px;
Example
.round{
display: inline-block;
width:50px;
height:50px;
background: red;
border-radius: 100%;
margin: 10px;
}
.ellipse,.stadium{
width: 80px;
}
.stadium{
border-radius: 9999px;
}
<div class="round circle"></div>
<div class="round ellipse"></div>
<div class="round stadium"></div>

Answer 2

Fixed Height Solution
For this you will need a "fixed" height (otherwise, you'll need to calculate this with jquery).
What you'll need to do is something like this;
html,body{background:#222;}
div {
margin:10px;
display: inline-block;
height: 30px;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position:relative;
color:blue;
}
div:before{
content:"";
position:absolute;
left:0;
top:-10px;
width:100%;
border-top:3px solid tomato;
}
<div>1</div>
<div>123</div>
Note: The border-radius should be set to half the overall height for this.
I've also included a min-width to ensure it is always at least a circle.
JQuery Solution For non-fixed heights
$(document).ready(function() {
$('div').each(function(index) {
var height = $(this).height();
$(this).css("border-radius", height + "px");
});
});
html,
body {
background: #222;
}
div {
margin: 10px;
display: inline-block;
border-radius: 25px;
background: lightblue;
font-size: 30px;
min-width: 30px;
text-align: center;
line-height: 30px;
padding: 10px;
position: relative;
vertical-align:top;
color: blue;
}
div:before {
content: "";
position: absolute;
left: 0;
top: -10px;
width: 100%;
border-top: 3px solid tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>123</div>
<div>Not a set height,
<br/>either :)</div>

Answer 3

div{
height:50px;
width:50px;
border-radius:9999px;
background:red;
text-align:center;
display:inline-block;
line-height:3em;
font-weight:bold;
font-size:16px;
}
<div>2</div>
<div>28</div>