Css for rounded corner and border color change on mouse hover

[Swapnil]

Hi,
how to write Css for rounded corner and border color change on mouse hover(ex:textbox,button,feildset) ?
Thanks

[Shinu]

Hi Swapnil,

Please try the following CSS class which works fine at my end.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<telerik:RadButton ID="RadButton" runat="server" Text="Click">
</telerik:RadButton>
<fieldset id="fieldset1" runat="server">
</fieldset>

CSS:

<style type="text/css">
    .riTextBox:hover
    {
        border-color: #FF0000 !important;
        border-radius: 5px 5px 5px 5px !important;
    }
    .rbSkinnedButton:hover .rbDecorated
    {
        border: 1px solid #178636 !important;
        -webkit-border-top-left-radius: 15px !important;
        -webkit-border-bottom-left-radius: 15px !important;
        -webkit-border-bottom-right-radius: 15px !important;
        border-radius: 15px 15px 15px 15px !important;
        margin-left: -7px !important;
    }
    #fieldset1:hover
    {
        border-color: #FF0000 !important;
        border-radius: 5px 5px 5px 5px !important;
    }
</style>

Thanks,
Shinu.

[Swapnil]

Thanks for the reply but
i want textbox rounded at page load and when mouse hover or focus on textbox the round colour must change to blue.
and all buttons are also rounded corner at page load.
Thanks

[Shinu]

Hi Swapnil,

Please take a look into the following CSS to give rounded corner and change color on hover.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<telerik:RadButton ID="RadButton" runat="server" Text="Click">
</telerik:RadButton>

CSS:

<style type="text/css">
    .riTextBox
    {
        border-radius: 5px 5px 5px 5px !important;
        border-color: #FF0000 !important;
    }
    .riTextBox:focus
    {
        border-color: Blue !important;
        border-radius: 5px 5px 5px 5px !important;
    }
    .riTextBox:hover
    {
        border-color: Blue !important;
        border-radius: 5px 5px 5px 5px !important;
    }
    .rbSkinnedButton .rbDecorated
    {
        border: 1px solid #178636 !important;
        -webkit-border-top-left-radius: 15px !important;
        -webkit-border-bottom-left-radius: 15px !important;
        -webkit-border-bottom-right-radius: 15px !important;
        border-radius: 15px 15px 15px 15px !important;
        margin-left: -7px !important;
    }
</style>

Thanks,
Shinu.