title: Changing picture frame with toggle button
body: <p>Ok so we have a simple user info editing page.I want to create a toggle button which swaps profile picture border-radius from 0 to 25 and backwards.But the 2nd part doesnt work.I created <code>if</code> to check if the boarder radius is 25 already so it will make it 0, but it does not work.Here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;/head&gt;
  &lt;body onload="buildImage();"&gt;
  &lt;div class="contents" id="content"&gt;&lt;/div&gt;
  &lt;button onclick="changeImage()"&gt;NextImage&lt;/button&gt;
  &lt;button onclick="changeShape()"&gt;ChangeShape&lt;/button&gt;
  &lt;button onclick="uploadImage()"&gt;Upload Image&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  var images = [ 'profile1.png', 'profile2.png','profile3.png'];
  var index = 0;
  var array_length = 3;
  function buildImage() {
    var img = document.createElement('img')
    img.src = images[index];
    document.getElementById('content').appendChild(img);
   }
  
     function changeImage(){
    var img =     document.getElementById('content').getElementsByTagName('img')[0]
    index++;
    index = index % array_length; 
    img.src = images[index];
  }
  function changeShape(){
    var shape = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "25px";
    if(shape.style.borderRadius == 25){
      var shape2 = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "0px";
    }
  
  }
  function uploadImage() {
  images.push("profile4.png");
  array_length++;
  
  }
  &lt;/script&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Any ideas why it doesnt work?</p>