CSS3 Moon Shape

CSS3 moon shape

With just a little inset you can style the shadow on top of the object.

E.g. Crescent shape.

And, This is the button you want.

.moon {  background-color: #222;  width: 50px;  height: 50px;  border-radius: 50%;  border: 4px solid #222;  /* I set 2 shadows where the first one doesn't have blur and spread for firefox fix. */  box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;  -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;}

<div class="moon"></div>

New moon shaped css not working in safari

This appears to be a bug in how webkit handles partial borders with border-radius set.

Here’s a method using box-shadow instead of borders, which I believe is visually similar:

.circle-box-shadow {  height: 50px;  width: 50px;  margin-left: 10px;  box-shadow: -10px 0 0 red;  border-radius: 50%;}
.circle-border {  height: 50px;  width: 50px;  border-left: 10px solid red;  border-radius: 50%;}

<p>Using <code>box-shadow</code>:</p><div class="circle-box-shadow"></div><br><p>Using <code>border</code>:</p><div class="circle-border"></div>

How to create a crescent moon border radius in rectangle right side?

You're almost there.
Set overflow:hidden to .rectangle, note the border-radius corners. Also you need to move .radius_rectangle to the right -- I used margin-left:auto. Anonther way is setting text-align:right to .rectangle.

.rectangle {
  height: 50px;
  width: 200px;
  overflow: hidden;
  background: #555;
  border-radius: 40px 0 0 40px;
  box-shadow: 0 0 3px 0 #000;
}

.radius_rectangle {
  width: 130px;
  height: 50px;
  margin-left: auto;
  background: #fff;
  border-radius: 40px 0 0 40px;
}

<div class="rectangle">
  <div class="radius_rectangle"></div>
</div>

Draw a crescent moon using SVG in HTML

Please note that my solution might not be the best. I am not an expert when it comes to vector graphics and you should definitely look for other solution

The approach I took is to draw another image with the same background. It will look like:
drawing 2 images

To Eliminate the extra border I draw another circle above it

drawing third image

Now Set the 3rd image border to white it will look like:

eliminate border

If you are not using borders you only need to use 2 circles

You might also wanna take a look at clipping and masking. It might be a better approach.

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
   <circle cx="115" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />
   <circle cx="130" cy="50" r="23" stroke="white" stroke-width="2" fill="white" />
</svg> 

</body>
</html>

Side note : W3Schools isn't really the reference you should be relying on. It's full of wrong information and outdated stuff. Better resources include:

Mozilla developers network
Web Platform

SVG Moon Phases

Hi I have a working copy such as this:

<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>Moon Phase Today</title></head><body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"  viewBox="0 0 73 73" >  <defs>   <radialGradient id="RadialGrad" fx="50%" fy="50%" r="65%" spreadMethod="pad">    <stop offset="0%"   stop-color="#E7D68C" stop-opacity="1"/>    <stop offset="100%" stop-color="#FFFEED" stop-opacity="1" />   </radialGradient>     </defs>  <rect width="100%" height="100%" />  <g transform="rotate(-20 35.5 35.5)">   <circle cx="35.5" cy="35.5" r="35" stroke="none"  fill="url(#RadialGrad)" />      <circle id='layoverCircle' cx="35.5" cy="35.5" r="35" stroke="none" fill="black" />      <rect id="layoverRectangle" style="display: none" width="100%" height="100%" />    <!-- <animate id="youngMoon" attributeName="cx" values="35.5;-35.5;" begin="1s;oldMoon.end+1s" dur="10s" fill="freeze" /> -->    <!-- <animate id="oldMoon" attributeName="cx" values="105;35.5;" begin="youngMoon.end+1s" dur="10s"  fill="freeze" />  -->       <!-- </circle>  -->  </g> </svg> <script type="text/javascript">  function setState(value, showCircle, showRect) {      let circle = document.getElementById('layoverCircle');   let rect = document.getElementById('layoverRectangle');      circle.style.display = showCircle ? "block" : "none";   rect.style.display = showRect ? "block" : "none";      if (showRect) rect.style.transform = value   if (showCircle) circle.setAttribute("cx", value);  }    function getMoonPhase(year, month, day) {   var c = e = jd = b = 0;      if (month < 3) {    year--;    month += 12;   }   ++month;   c = 365.25 * year;   e = 30.6 * month;   jd = c + e + day - 694039.09; //jd is total days elapsed   jd /= 29.5305882; //divide by the moon cycle   b = parseInt(jd); //int(jd) -> b, take integer part of jd   jd -= b; //subtract integer part to leave fractional part of original jd   b = Math.round(jd * 8); //scale fraction from 0-8 and round   if (b >= 8 ) {    b = 0; //0 and 8 are the same so turn 8 into 0   }         // 0 => New Moon 37.5 [show circle, hide rect]   // 1 => Waxing Crescent Moon 50.5 [show circle, hide rect]   // 2 => Quarter Moon //translateX(50%), [display rect, hide circle]   // 3 => Waxing Gibbous Moon 70.5 [show circle, hide rect]   // 4 => Full Moon [hide circle and rect]   // 5 => Waning Gibbous Moon, -15.5 [show circle, hide rect]   // 6 => Last Quarter Moon //transform: translateX(-50%) [display rect, hide circle]   // 7 => Waning Crescent Moon 30.5 [show circle, hide rect]      return b;  }    let d = new Date();  let i = 0;  let callback = function () {      let phase = getMoonPhase(d.getFullYear(), d.getMonth()+1, d.getDate() + i)   i += 4   if (phase == 0) setState(37.5, true, false);   if (phase == 1) setState(50.5, true, false);   if (phase == 2) setState("translateX(50%)", false, true);   if (phase == 3) setState(70.5 , true, false);   if (phase == 4) setState(NaN , false, false);   if (phase == 5) setState(-15.5, true, false);   if (phase == 6) setState("translateX(-50%)", false, true);   if (phase == 7) setState(30.5 , true, false);   setTimeout(callback, 1000);  };  callback(); </script></body></html>