- Dec 18, 2010
- 2,638
- 2,393
If you're a web developer, you're probably familiar with the border-radius feature in CSS3. In my opinion, it's a complete pain in the ass to write 5 lines of code to achieve the effect of curved borders, so I wrote a little JavaScript code that will do it for you.
It only took me 2 minutes so I don't really care about sharing it. Use as you wish.
Usage is very, very easy.
It can be used on any element on a web page and can be extended to support specified areas of the border, such as top-left etc if you have the time to do so.
It only took me 2 minutes so I don't really care about sharing it. Use as you wish.
Usage is very, very easy.
It can be used on any element on a web page and can be extended to support specified areas of the border, such as top-left etc if you have the time to do so.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Border Radius</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("[data-border-radius]").each(function(i,a){
var br = $(a).attr("data-border-radius");
if ($.isNumeric(br)) {
$(a).css({
"border-radius": br + "px",
"-webkit-border-radius": br + "px",
"-moz-border-radius": br + "px",
"-o-border-radius": br + "px",
"-khtml-border-radius": br + "px"
});
}
});
});
</script>
</head>
<body>
<h3>Original</h3>
<div style="background-color: #000000; height: 100px; width: 100px;"></div>
<hr />
<h3>JavaScript edit</h3>
<div style="background-color: #000000; height: 100px; width: 100px;" data-border-radius="10"></div>
</body>
</html>
