Medio círculo con CSS (borde, solo contorno)

Nuestro grupo de especialistas luego de días de trabajo y de recopilar de datos, han obtenido los datos necesarios, deseamos que resulte de gran utilidad para tu proyecto.

Solución:

podrías usar border-top-left-radius y border-top-right-radius properties para redondear las esquinas del cuadro de acuerdo con la altura del cuadro (y los bordes agregados).

Luego agregue un borde en los lados superior/derecho/izquierdo del cuadro para lograr el efecto.

Aqui tienes:

.half-circle 
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;

DEMO DE TRABAJO.

Alternativamente, podría agregar box-sizing: border-box a la caja para calcular el ancho/alto de la caja, incluidos los bordes y el relleno.

.half-circle 
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

DEMOSTRACIÓN ACTUALIZADA. (Manifestación sin color de fondo)

Tuve un problema similar no hace mucho tiempo y así fue como lo resolví

.rotated-half-circle 
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);

Utilizo un método de porcentaje para lograr

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;

Puedes añadir valor a nuestro contenido tributando tu experiencia en las acotaciones.

---

---

Utiliza Nuestro Buscador