Css for rounded corner and border color change on mouse hover

4 posts, 0 answers
  1. Swapnil
    Swapnil avatar
    96 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    Hi,
    how to write Css for rounded corner and border color change on mouse hover(ex:textbox,button,feildset) ?
    Thanks
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Swapnil
    Swapnil avatar
    96 posts
    Member since:
    Aug 2013

    Posted 29 Aug 2013 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Aug 2013 Link to this post

    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.
Back to Top