RoundCorners for ComboBox

2 posts, 0 answers
  1. Venkata
    Venkata avatar
    128 posts
    Member since:
    Nov 2009

    Posted 27 May 2015 Link to this post


    I am trying to set RoundCorners for my ComboBox. here is my code and CSS and image


    <telerik:RadComboBox ID="RadcFilter" AllowCustomText="false" Font-Size="10pt"  SelectOnTab="true" HighlightTemplatedItems="true" MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false" OnClientKeyPressing="radComboKeyPress"  OnClientFocus="OnClientFocus"  Filter="StartsWith" Skin="Simple"  runat="server" Width="300px" Height="150px"   EmptyMessage="Filter By ..." AutoPostBack="true" >



    <style type="text/css">  
           html, body, form 
              height: 100%; 
              margin: 0px; 
              padding: 0px; 
           div.RadComboBox_Simple .rcbInput
               line-height: 17px;
           div.RadComboBox_Simple table tr td.rcbInputCell
               height: 27px;
               line-height: 27px;
           div.RadComboBox_Simple td.rcbArrowCell a
               height: 27px;
           div.RadComboBox_Simple table tr td.rcbArrowCell
               background-image: url('images/rcbSimpleSprite.png');
               background-repeat: no-repeat;
               background-position: 0 50%;
           div.RadComboBox_Simple td.rcbArrowCell { background-position: 0 50%; }
           div.RadComboBox_Simple .rcbHovered .rcbArrowCell { background-position: -20px 50%; }
           div.RadComboBox_Simple .rcbFocused .rcbArrowCell { background-position: -40px 50%; }
           div.RadComboBox_Simple .rcbDisabled .rcbArrowCell { background-position: -60px 50%; }
           div.RadComboBox_Simple table td.rcbInputCell
               border-radius: 7px 0 0 7px !important;
               border : 1px solid gray;
           div.RadComboBox_Simple table td.rcbArrowCell
               border-radius:0 7px 7px 0 !important;
               border : 1px solid gray;



    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
           <script type="text/jscript">
                   function radComboKeyPress(comboBox, eventArgs) {
                   var keyCode = eventArgs.get_domEvent().keyCode;
                   if (keyCode == 9) {
                       try {
                       catch (err) {
               function OnClientFocus(sender, args) {

  2. Dimitar
    Dimitar avatar
    359 posts

    Posted 28 May 2015 Link to this post


    In order to customize the RadComboBox appearance easier only with CSS, I would recommend you to use its Lightweight Render Mode:

    <telerik:RadComboBox ID="RadComboBox1" RenderMode="Lightweight" runat="server" Skin="Simple">

    Thus, you could achieve rounded corners only with the following rule:

    html .RadComboBox .rcbInner, html .RadComboBox .rcbActionButton {
        border-radius: 7px;

    And the result is as follows:

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top