RoundedCornersExtender - border instead of background color?

Does anyone know if there's a way to use a RoundedCornersExtender on a panel to create add just a border with rounded corners instead of having to set the whole background color?

In other words, picture a white page background, with a white background inside my panel, but i want a rounded black border around the panel. Is this possible?

Thanks in advance for any thoughts/suggestions.

-Gabe

RoundedCorners has a Color property. Set that to black, then set

style="border-left:thin black solid;border-right:thin black solid;"

on your element.

sburke_msft:

RoundedCorners has a Color property. Set that to black, then set

style="border-left:thin black solid;border-right:thin black solid;"

on your element.

A suggestion for futher releases of the toolkit would be to use less CSS and more properties... would help a lot and make development more intuitive...

Regards,

Felipe Oquendo
MCAD

Thanks for the feedback. It might make certain things more discoverable but there's really no way to mimic the power and flexibility found in CSS via properties.
Alas, this doesnt look very good at all. The borders don't meet up nicely with the top and bottom, and they're not nearly the same thickness. Any other suggestions, or am I doing something wrong?

Here's the markup I'm using:
<asp:Panel ID="panTest" runat="server" style="border-left:thin black solid;border-right:thin black solid;">
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
</asp:Panel>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
<cc1:RoundedCornersProperties Color="black" Radius="6" TargetControlID="panTest" />
</cc1:RoundedCornersExtender
Screenshot here:http://img130.imageshack.us/img130/6744/iescreenshot7mb.gif

Thanks for the screenshot - very helpful.

Try this instead:

<asp:Panel ID="panTest" runat="server" >

<div style="width:100%;border-left:thin black solid;border-right:thin black solid;">
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />
Some content goes here <br />

</div>
</asp:Panel>

Thanks for the suggestion, but that doesn't look any better to me. Did you try it and get nice looking results?

No but I just did and if you make the borders a little wider I think it looks good:

<asp:PanelID="panTest"runat="server">

<divstyle="border-left:5px black solid;border-right:5px black solid;">

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/>

Some content goes here

<br/></div></asp:Panel>

ghollombe:

Does anyone know if there's a way to use a RoundedCornersExtender on a panel to create add just a border with rounded corners instead of having to set the whole background color?

In other words, picture a white page background, with a white background inside my panel, but i want a rounded black border around the panel. Is this possible?

The comments seem to have gotten off the original topic, and the original topic interests me a lot.

Let's get back to the original question...could the RoundedCornersExtender be modified to give us a rounded border option (and the option to set the thickness of the border)?

I have a case where we would like a rounded border (slghtly darker color than the content it surrounds). I see what the extender is doing..it adds several 1px high divs above and below. To get the rounding effect, they have left and right margins.

However, if it was modified to do a border, then it would have to work differently, which could be a little tricky. This is because at some point you would need an indented div of the border color that is only borderwidth wide, then a div of the background color, then an indented div of the border color again. I'm not sure if that works by itself or if you'd have to get into tables to do it.

Furthermore, you'd have to put a border on the left and right of the panel.

It would be useful and cool, but definitely more comlicated.

Hi Guys,

You were pretty close. The solution that appears to works across browsers for me is. It is just a shame the RoundedCornersProperties can't be driven from a stylesheet.

<div id="hello" runat="server">
<div style='border-left:thin black solid;border-right:thin black solid;'>
test
</div>
</div>
<cc1:RoundedCornersExtender ID="DropShadowExtender1" runat="server">
<cc1:RoundedCornersProperties TargetControlID='hello' Radius="10" Color="black" />
</cc1:RoundedCornersExtender>

have you tried something like this...

<asp:PanelID="Panel1"runat="server"Height="50px"Width="500px"BackColor="lightBlue"style="margin:10px 10px 10px 10px"><asp:PanelID="Panel2"runat="server"height="42px"BackColor=Whitestyle="margin: 0px 4px 0px 4px">

TEST

</asp:Panel></asp:Panel><AjaxToolkit:RoundedCornersExtenderID="RoundedCornersExtender1"runat="server"TargetControlID="Panel1"Radius=4/>

<AjaxToolkit:RoundedCornersExtenderID="RoundedCornersExtender2"runat="server"TargetControlID="Panel2"Radius=4/>

It may be one too many panels for you but it works