Unfortunately, the current rendering of RadDock does not provide out-of-the-box support for rounded corners. What I mean is that in the default mode of the control there are not enough elements that can be used to set rounded corners.
However, with a tiny little trick, and a bit of CSS this can e achieved relatively easy.
To do so, first set the resizable="true"
to the server declaration of RadDock. You may refer to the following example of our online demos: http://demos.telerik.com/aspnet-ajax/dock/examples/dockresize/defaultcs.aspx
, in which RadDock 2
is resizable. Second, use FireBug or Microsoft Internet Explorer Developer Toolbar to examine the new elements in which the dock object is wrapped in. You will notice, that there is a table, which td's can be used to add the side elements of the rounded corners design. Here are the CSS classes that can be used:
.rdTopLeft, .rdTopCenter, .rdTopRight, .rdLeftMiddle, .rdRightMiddle, .rdBottomLeft, .rdBottomCenter, .rdBottomRight
To better illustrate the idea, please, take a look at the screenshot I have provided with this email. Make sure you force the new properties values for these classes with the !important flag, otherwise they will be overridden by our skin, as it is loaded after any custom styles, i.e:
background: url('Path/To/TopLeftCorner.gif') no-repeat !important;
the Telerik team