Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if you will check the properties available with Roundedcornersextender, it is very limited. Here is the available properties:

1. BorderColor
2. Color
3. Corners : to set which corner will be rounded
4. ScriptPath
5. TargetControlID
6. Radius : to set the radius

These are only available properties except with some like ID, ViewStatMode etc. So how to use padding, margin, border-width, border-style etc. No way, you need to write the CSS class for that, so why should we use Roundedcornersextender than directly use the CSS classes.

Let's see why Roundedcornersextender is not so popular between developers than other ajax controls like modalpopupextender, updatepanel etc. If you will see the final output it is using CSS3 border-radius, it means it will not work with those browsers which doesn't support CSS3. Let's see an example, how to use and what is the output of it.

<div id="divMain" runat="server"  
    style="width:200px; background-color:#bbb;">
    ID="ajxRounded"  <br />
    runat="server" <br />
    Color="Yellow"<br />
    Corners="All"<br />
    BorderColor="Red"<br />
    Radius="10"      <br />         
    TargetControlID ="divMain" <br />
</div>
<ajax:RoundedCornersExtender 
    ID="ajxRounded" 
    runat="server"
    Corners="All"
    BorderColor="Gold"
    Radius="10"               
    TargetControlID ="divMain" />

And here is the output:

Now let's analyze what it creates, open the firebug and check the HTNLcode you will see:

<div style="width:300px; background-color: rgb(187, 187, 187); 
   border-radius: 10px 10px 10px 10px;
   border: 1px solid Gold;" 
   id="ctl00_MainContent_divMain">
       ID="ajxRounded"  <br>
       runat="server" <br>
       Color="Yellow"<br>
       Corners="All"<br>
       BorderColor="Red"<br>
       Radius="10"      <br>         
       TargetControlID ="divMain" <br>
</div>

Do you think it is very useful control, I don't think so, I'll never use this control in entire life after analyzing it that it is using CSS3 border-radius property. So what is the alternative and better way to use for rounder corner box.

For the same output we can create CSS class, and that would b more easier, faster, better and with more options to set padding, margin and other properties. Create a class in our CSS file say ruonded-box

.ruonded-box
{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 1px solid Gold;

   padding:7px;
   margin:7px;
   width:300px; 
   background-color:#bbb; 
}

As you can see here we can use anything which we want like margin, passing, width of border and other properties which we want.

and simple to use

<div class='ruonded-box'>
    It is really easy to use than
    Roundedcornersextender
</div>

If you want to see a demo set the border radius and see the effects.

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 17,430

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 331

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 6,637

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,137

Ajax Modalpopupextender show hide from code behind and by javascript

In this article we will discuss different way of show and hide (open and close) modal popup by using Ajax ModalPopupExtender, how to open/close a modal popup from code behind in asp.net or by using JavaScript, how to use multiple buttons to hide the modal popup in asp.net etc. Suppose we have a... By Jonathan King   On 08 Apr 2013  Viewed: 28,543