Add Rounded Borders to Fields

This article shows you how to add CSS3 rounded corners to your DataPage fields.  Please note that this technique will not appear on Internet Explorer as that browser has not yet adopted the CSS3 standards.  Rounded corners will appear on other next generation browsers including: Firefox, Chrome, Opera, Safari, etc.  Although this technique does not work on the current version of Internet Explorer it is commonly employed by popular websites.

Steps to adding rounded borders:

In the Caspio Bridge proceed to the Styles section.  Select the style you would like to change and click the Edit button.

On the Define Style Settings screen, click on the Source tab to view the CSS source.

In the DataPage Elements panel, under the Forms/Details section locate the Fields sub-section.  Each of these elements should already contain a border style.  We are going to add some CSS to these elements to round the border edges.  Add the following code to these elements: .cbFormTextField, .cbFormTextArea, .cbFormPassword

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-khtml-border-radius: 6px;


You can adjust how rounded the corners are by increasing or decreasing the radius number (6px).

Note: Your fields must have a border style to have rounded borders (for example, border:2px solid grey;).

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.