There are few divs. I need to change the border radius of them with click event. i have managed to change the border radius only once. When someone click on a div, the border radous should be changed to 50%, And click on the same div again, applied border radius should remove.

And while there is a border changed div and if click on another div border of the changed div should remove and border radius should applied to clicked div. Which means there must be only one border radius applied div at a time.

I have this code

[jsfiddle](http://jsfiddle.net/Hq6TQ/)

**HTML**

```
<div></div>

<div></div>

<div></div>

<div></div>

```

**ANd this css**

```
div {
    width: 100px;
    height: 100px;
    background: #000;
    margin: 10px;
    float: left;
}

```

**also this jquery code**

```
$('div').each(function(){
    $(this).click(function(){
        $(this).css('border-radius', '50%');
    });
});

```

help me please, on this.. i have no idea about how to do this..