Rounded Corner Control

I was trying to use the rounded corner extender with panels. I have applied border to the panels. Whenever i use the extender with the panels the effect is there however it is not clearly visible as the border does not have the rounded corners. When i remove the border then the effect is clearly visible. Please help me using the rounded corner extender with the panels so that the border will have rounded corners.

Thanks and Regards,

Geevika

Hi Geevika

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.Before that , We also suggest that you should have a look at thishttp://www.asp.net/AJAX/Control-Toolkit/Live/RoundedCorners/RoundedCorners.aspx.

Here we provide a sample ,which is contained in Control Toolkit source code.

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">RoundedCorners Demonstration</div>

<asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
<div style="padding: 10px; text-align: center">
<div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" /><br />
ASP.NET AJAX
</div>
</div>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1"
Radius="6"
Corners="All" />

<div style="padding-top: 3px;">CornerRadius:</div>
<div style="padding: 10px;">
<input type="radio" id="radius0" name="radiusValues" value="0"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius0">None</label>

<input type="radio" id="radius2" name="radiusValues" value="2"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius2">2px</label>

<input type="radio" id="radius4" name="radiusValues" value="4"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius4">4px</label>

<input type="radio" id="radius6" name="radiusValues" value="6"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" />
<label for="radius6">6px</label>

<input type="radio" id="radius10" name="radiusValues" value="10"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius10">10px</label>
</div>

<div style="padding-top: 3px;">Corners:</div>
<div style="padding: 10px;">
<input type="checkbox" id="corner1" name="cornerValues" value="1"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner1">Top Left</label>

<input type="checkbox" id="corner2" name="cornerValues" value="2"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner2">Top Right</label><br />

<input type="checkbox" id="corner8" name="cornerValues" value="8"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner8" >Bottom Left</label>

<input type="checkbox" id="corner4" name="cornerValues" value="4"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner4">Bottom Right</label>
</div>

<div style="padding-top: 3px;">Border Color:</div>
<div style="padding: 10px;">
<input type="radio" id="color0" name="colorValues" value=""
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" checked="checked" />
<label for="color0">None</label>

<input type="radio" id="color1" name="colorValues" value="Black"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color1">Black</label>

<input type="radio" id="color2" name="colorValues" value="Red"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color2">Red</label>

<input type="radio" id="color3" name="colorValues" value="Aqua"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color3">Aqua</label>
</div>
</div>

If your problem has been resolved or be resolved by the sample , please mark it as "Answered" or "Resolved", so our community members will not waste their time on a resolved issue. Otherwise, would you please provide a sample here? Thanks.

Best Regards,

Jonathan

Hi Jonathan,

Thanks for ur reply. The following is the part of the source code:

<asp:Panel ID="pnlCountry" runat="server" Style="position: relative; top: 24px; border-style: groove;
left: 8px; z-index: 101;" Height="125px" Width="950px" BackColor="#E0E0E0">

<asp:Label ID="lblCountryName" runat="server" Style="z-index: 100; left: 296px; position: absolute;
top: 32px" Text="Country Name" Width="104px"></asp:Label>
<asp:TextBox ID="txtCountryName" runat="server" Style="z-index: 101; left: 424px;
position: absolute; top: 32px"></asp:TextBox>
<asp:Button ID="btnCancelCountry" runat="server" Style="z-index: 106; left: 808px;
position: absolute; top: 80px" Text="Cancel" BackColor="Silver" />
<asp:Button ID="btnSaveCountry" runat="server" Style="z-index: 104; left: 712px;
position: absolute; top: 80px" Text="Save" Width="56px" BackColor="Silver" />
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="pnlCountry"
Radius="8" Corners="All" />

As u might have noticed I have applied border style= groove to the panel name pnlCountry. After that I have used the RoundedCornersExtender to round the corner of the panel. However, the effect is that the panel has the rounded corner but because of the border it seems that corners are still pointed as it is the panel that gets the rounded corners not the border of the panel. So the effect is there but it is not visible. Plz help.

Thanks & Regards,

Geevika

Hi Geevika,

Would you please explain more clearly? I have tested your sample and it seems that the border , which is groove ,is not displayed well. If it is your problem, I think it's CSS issue. My suggestion is using a <div> element show the border instead of your Panel control.

Best Regards,

Jonathan

Country Name

Hi Jonathan,

I think I was unable to explain my point clearly. The code that i sent to you gives the above result however, this above displayed output did not include Ajax rounded corner control. As you can see the border is clearly visible and border style is groove. Now whenever I apply the ajax rounded corner control, the border remain as it is(pointed corners) but the panel body(inner light gray part) gets the rounded corners. So the effect of rounded corner control is there but that is not clearly visible as the border did not get the rounded corners. What I m trying to do is that the panel border should also get the rounded corners so that the effect should be clearly visible.

Thanks & Regards,

Geevika

Hi Geevika,

As far as I know, I'm afraid that we cannot achieve this by setting any property directly.I have nested a RoundedCornersExtender but find that it is difficult to control its diplay position.So I think the best way is using <div> element.

Best Regards,

Jonathan