title: Get heart-shaped border using CSS?
body: <p>I have this code that is used to create a colored heart (which has a blue background) and an uncolored heart(white colored with blue border ) using CSS:</p>
  
  <pre><code>#favourite_user {
      position: relative;
      width: 25px;
      height: 22.5px;
      margin: 30px;
      cursor:pointer;
  }
  #favourite_user.favourited:before,#favourite_user.favourited:after {
      background: #3498db;
  }
  #favourite_user.unfavourited:before,#favourite_user.unfavourited:after {
      background: #fff !important;
      border: 1px solid #3498db;
  }
  #favourite_user:before,
  #favourite_user:after {
      position: absolute;
      content: "";
      left: 12.5px;
      top: 0;
      width: 12.5px;
      height: 20px;
      -moz-border-radius: 50px 50px 0 0;
      border-radius: 50px 50px 0 0;
      -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
           -o-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-transform-origin: 0 100%;
         -moz-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
           -o-transform-origin: 0 100%;
              transform-origin: 0 100%;
  }
  #favourite_user:after {
      left: 0;
      border-left:0px !important;
      -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
           -o-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-transform-origin: 100% 100%;
         -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
           -o-transform-origin: 100% 100%;
              transform-origin :100% 100%;
  }
  </code></pre>
  
  <p>On clicking the heart i am toggling classes <code>.favourited</code> and <code>.unfavourited</code> , one which has a bluish background while the other is supposed to have just a blue border with a white background .
  But i am not able to achieve this , a part of this border is not coming out well using psuedo elements <code>:before</code> and <code>:after</code>.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/M9cHA/" rel="nofollow">Fiddle</a></p>
  
  <p>Any pointers regarding the solution would be greatly appreciated...Thanks in advance...</p>