3792759 - How to create curved left and right borders for an input control on a story in SAP Analytics Cloud?

• The option to curve the border called "Corner Radius" is only available when the Input Control is formatted to show all the borders.
• How to format the borders to be curved, if we have only a left and right border for the Input Control, on a story in SAP Analytics Cloud?

SAP Analytics Cloud 2026.8.6

1. Login to SAP Analytics Cloud.
2. Open a story that uses input controls styled to show only left and right borders.
3. Notice in the Styling pane, that there is no option to round the corners. 

The option "Corner Radius" that is used to round the border corners, is only an option that applies when all the four borders (top, bottom, left, right) are enabled on the widget. 

It is possible to customized widgets formatting by using CSS, therefore, to format the border of Input Control and show a left and a right border with a curve, use CSS: 

1. In SAP Analytics Cloud, open the story containing the Input Controls you will like to have a rounded left and right borders.
     
2. Go to the Edit mode.
     
3. Add a CSS that format the Input Controls with round borders
   
   1. In the toolbar, under “Format”, select: “Edit CSS”
   2. In the Story CSS, add the following CSS that format the border of an Input Control to show a left and right borders, with a border radius ( curve ) of 8 pixel. ( This is a sample CSS. Modify it to suit your preferences )
      
      .my-ic-borders .sap-custom-input-control-widget {  
        border-top: 0px solid transparent;
        border-bottom: 0px solid transparent;
        border-left: 1px solid #2d2c6e;
        border-right: 1px solid #2d2c6e;
        border-radius: 8px;
         
   3. In the Toolbar, select “Story – CSS”, and in the drop-down, select: “Close”
        
4. Select an Input Control, and in the Styling pane on the right side, under “CSS Class Name” option, select the CSS created. In this example, select:  my-ic-borders
     
5. Still in the Styling pane, scroll down, and set the Border option to: No Border
   
   
6. Repeat step 4, and 5 for each Input Control where you want it to have a left and right border to be curved.
     
7. Save the story.

SAC, input control, present mode, view mode, edit mode, border, corner radius, curved borders, straight lines, styling, widget, story, theme, css, visualization, formatting , KBA , LOD-ANA-DES , Story Design & Visualizations , How To