ul.semaforo {
  position: relative;
  /* width: 60px; */
  margin: 5px auto;
  padding: 0;
  list-style-type: none;
}
ul.semaforo li {
  position: relative;
  display: block;
  /* float: left; */
  width: 20px;
  height: 20px;
  margin: auto;
  border-radius: 50%;
  background: lightgrey;
}

.rojo li:nth-of-type(1) {
  border-color: red;
  background-color: red;
  background: radial-gradient(center, ellipse cover, #ff0000 1%, #cc0000 100%);
}
.naranja li:nth-of-type(1) {
  border-color: orange;
  background-color: orange;
  background: radial-gradient(center, ellipse cover, #ffd700 1%, #ff8c00 100%);
}
.amarillo li:nth-of-type(1) {
  border-color: red;
  background-color: #ecea09;
  background: radial-gradient(center, ellipse cover, #aaaaaa 1%, #aaaaaa 100%);
}
.verde li:nth-of-type(1) {
  border-color: limegreen;
  background-color: limegreen;
  background: radial-gradient(center, ellipse cover, #00ff00 1%, #32cd32 100%);
}
.gris li:nth-of-type(1) {
  border-color: #414042;
  background-color: #414042;
  background: radial-gradient(center, ellipse cover, #414042 1%, #414042 100%);
}
.blanco li:nth-of-type(1) {
  border-color: rgb(91, 91, 91);
  background-color: rgb(91, 91, 91);
  background: radial-gradient(center, ellipse cover, #504f4f 1%, #6a6a6a 100%);
}