Welcome to another AJAX tutorial, today we will be going over the AJAX extender RoundedCorners.

We used Microsoft’s Visual Studio 2010; Visual Web Developer can also be used to recreate this tutorial.

Rounded Corners are frequently requested CSS techniques. Some of you CSS Ninjas out there may be familiar with CSS rounded corners, but for those who are not yet Ninja Dojo CSS masters there is an alternative!

Let us show you an easy way to utilize this secret technique known to the AJAX brethren.

So today we will be using the great power bestowed upon us by the AJAX Gods, which uses some CSS and some JavaScript.

The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property.

Client Side References
Sys.Extended.UI.RoundedCornersBehavior Class
• Summary – Rounds the corners of its target element.
• Parameters – Sys.UI.DomElement element

Methods
• initialize() – Initializes the RoundedCorners behavior.
• dipose() – Disposes the RoundedCorners behavior.
• update() – Creates the surrounding div element that has rounded corners.
• disposeParentDiv() – Disposes the surrounding div element that has rounded corners.
• getBackgroundColor() – Gets the background color of the target element.
• moveChildren() – Moves the child nodes from one element to another.
• Parameters – Sys.UI.DomElement src, Sys.UI.DomElement dest
• isCornerSet(corner) – Checks whether the specified corner has been set.
• Parameters – AjaxControlTooolkit.BoxCorners corner
• Returns – true if the corner has been set; otherwise, false.
• setCorner(corner, value) – Sets a corner that should be rounded.
• Parameters – Sys.Extended.UI.BoxCorners corner, Boolean value
• Remarks – Set the value parameter to true to set the corner as rounded. Set the value parameter to falseto clear the rounded corner setting.

Properties
• Color – Gets or sets a string that contains the background color of the rounded corner areas. By default, this property gets the background color of the panel that it is attached to.
• Radius – Gets or sets an integer value that specifies the radius of the corners (and the height of the added area). The default is 5.
• Corners – Gets or sets a Sys.Extended.UI.BoxCorners object that specifies which corners should be rounded.
• BorderColor – Gets or sets a string that contains the color of the border and therefore of the rounded corners.

Sys.Extended.UI.BoxCorners Enum
• Summary – Defines the corners of an element to apply rounding to.

Fields
• None : 0×00
• TopLeft : 0×01
• TopRight : 0×02
• BottomRight : 0×04
• BottomLeft : 0×08
• Top : 0×01 | 0×02
• Right : 0×02 | 0×04
• Bottom : 0×04 | 0×08
• Left : 0×08 | 0×01
• All : 0×01 | 0×02 | 0×04 | 0×08
Server Side References

The properties in italics are optional.
• TargetControlID – The Target control of the ID.
• Radius – The Radius of the Cornes you want to modify
• Corners – You can Seclect which corners to modify or all of them (None, TopLeft, TopRight, BottomRight,BottomLeft, Top, Right, Bottom, Left, or All)

The RoundedCorners extender applies rounded corners to existing elements. To accomplish this, it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose which corners of the target panel should be rounded by setting the Corners property.

So let’s begin building our rounded corners web application.
First let’s add a new WebForm to this project and name it RoundedCorner.aspx.
Remember to add a ScriptManager to the page.

Now we can begin adding our Panel where the animation or rounded corners will happen without postback.

We styled the Rounded Panel, just for demonstrations purposes.

Now we may add our star of the show the rounded corners extender !!!

As you can see we Set the target ID to control the Panel and gave it a radius of 6 and we are going to manipulate all corners.

Now since we called a radius we can demonstrate exactly how it works by adding a few radio buttons and setting the Value in increments of 2 all the way to 10.

Next we are going to set the corner values. We used Checkbox this time and set an onclick to change each of the corner but still retaining the above chosen corner radius.

Now we can select the border color and even change them on the fly.

Now you should have a few options to play with and here is what it should look like.

Just a panels with different options so you may see the transformations.

Thank you for reading our tutorial on AJAX Controls, We Aim to provide the best Tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a Tutorial or you can comment below in the comments section.

Download Source Files