This is a migrated thread and some comments may be shown as answers.

Css for rounded corner and border color change on mouse hover

3 Answers 102 Views
Input
This is a migrated thread and some comments may be shown as answers.
Swapnil
Top achievements
Rank 1
Swapnil asked on 28 Aug 2013, 10:16 AM
Hi,
how to write Css for rounded corner and border color change on mouse hover(ex:textbox,button,feildset) ?
Thanks

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 29 Aug 2013, 05:05 AM
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.
0
Swapnil
Top achievements
Rank 1
answered on 29 Aug 2013, 06:39 AM
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
0
Shinu
Top achievements
Rank 1
answered on 30 Aug 2013, 02:51 AM
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.
Tags
Input
Asked by
Swapnil
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Swapnil
Top achievements
Rank 1
Share this question
or