Using jquery.corner.js to Round the Corners of Specified Areas

In the world of web design, “rounded corners” are very effective for creating a soft appearance. Recently, this can be easily achieved using the CSS border-radius property, but in the past, various techniques were needed to achieve this effect.

This time, we will introduce how to round the corners of a specified area using jquery.corner.js, one of the JavaScript libraries. This plugin works even on older browsers, making it useful for projects that prioritize compatibility.

What is jquery.corner.js?

jquery.corner.js is one of the jQuery plugins designed to easily add rounded corner effects to HTML elements. While modern browsers are sufficient with CSS alone, this plugin is useful for older browsers or when you want to dynamically change the rounded corners with JavaScript.

Features

• Simple Syntax: Implement rounded corner effects with simple code.
• Compatibility: Works without problems even on older browsers.
• Flexible Options: Various rounded corner styles can be specified.

CSS for Rounding the Corners of Specified Areas Using jquery.corner.js

First, set the basic styles with CSS. Below is the CSS code to apply rounded corners to three sample classes.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
	font-weight:normal;
}
#idWrap{
	width:500px;
	margin:0 auto;
}

.clSample1{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
.clSample2{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
.clSample3{
	width:18em;
	padding: 20px;
	margin: 1em;
	background: #6af;
}
-->
</style>

This style sets the three areas, .clSample1, .clSample2, and .clSample3, with the same background color and size. The rounded corner effect is added with JavaScript.

JavaScript for Rounding the Corners of Specified Areas Using jquery.corner.js

Next, use jquery.corner.js to round the corners of the specified area. Add the following JavaScript code to your HTML.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".clSample1").corner();
	$(".clSample2").corner("top");
	$(".clSample3").corner("5px");
});
</script>

This script loads jquery.min.js and jquery.corner.js and applies rounded corners in the following three patterns:

• .clSample1 – Round all corners.
• .clSample2 – Round only the top corners.
• .clSample3 – Round all corners with a radius of 5 pixels.

HTML for Rounding the Corners of Specified Areas Using jquery.corner.js

Next, describe the HTML. Below is a sample HTML code for applying three rounded corner patterns.

<div id="idWrap">
	<h1>Round the corners of specified areas.<br />
    Here we specify three patterns, but it seems that various options can be specified.</h1>

    <div class="clSample1">
    All corners
    </div>
    <div class="clSample2">
    Top only
    </div>
    <div class="clSample3">
    Set corner radius to 5px
    </div>

</div><!--/idWrap-->

This HTML structure specifies classes corresponding to each area so that you can see the rounded corner effect.

Demo Page: Rounding the Corners of Specified Areas Using jquery.corner.js

If you want to check the operation, please see the demo page below.

jquery.corner: Demo Page for Rounding Specified Areas

On the demo page, you can actually try various rounded corner effects.

Source: JQuery Corner Demo

If you want to learn more about jquery.corner.js, please visit the official site.

Source: JQuery Corner Demo

This plugin provides dynamic rounded corner effects that cannot be achieved with CSS alone, but in modern web development, similar effects can be easily achieved with CSS, so consider implementing it with CSS as well.

Conclusion

The jquery.corner.js introduced this time is a useful tool, especially when compatibility with older browsers is required or when you want to dynamically manipulate rounded corners. However, in the latest projects, we recommend using CSS border-radius as much as possible. Rounded corners with CSS are less of a load on the browser and easier to maintain style consistency.

In web design, simplicity and compatibility are important. Choose the right tool for the situation and provide the best user experience.

*Please use it at your own risk when reusing it. Do not reuse the Google Analytics tag within the demo page tags.