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 Explorer window proceed to the Styles view.  Select the style you would like to change and click the Edit button.  On the first screen be sure to click the checkbox marked Advanced Options (show CSS).

Proceed to the Settings screen.  Now that the Advanced Options have been enabled, along the top of the screen you should see a second tab labeled Source.  Click on that 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

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;).

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.