Border Styling Properties

Documentation home

This page contains documentation for the border group of control styling properties available using Styling Assistants.

Properties

See also local/inherited control properties.

Property	Description	Name^1	Type^1	Get^1	Set^1	Get/Set Values^1
Border
All Borders	Width of all borders unless any of the following 4 properties are set.	borderWidth	Character	Yes	Yes	As CSS border-width property
Left Border	Width of the left border	leftBorderWidth	Character	Yes	Yes	As CSS border-left-width property
Right Border	Width of the right border	rightBorderWidth	Character	Yes	Yes	As CSS border-right-width property
Top Border	Width of the top border	topBorderWidth	Character	Yes	Yes	As CSS border-top-width property
Bottom Border	Width of the bottom border	bottomBorderWidth	Character	Yes	Yes	As CSS border-bottom-width property
Style	Supports the following options (as CSS border-style property): · None · Solid · Dotted · Dashed · Double · Groove · Ridge	borderStyle	Character	Yes	Yes	As CSS border-style property
Color	The border color. See color properties	borderColor	Character	Yes	Yes	As CSS color property
Border Radius	The following border radius properties are not always available. These properties set the degree of curvature for the corners of a border. Curved borders are not currently supported by the Ebase page designer, therefore the affect of the properties is not shown in the designer. The curved borders will however be shown when the form is run in a browser. Caution!: border radius is implemented using a combination of the CSS3 border-radius property and a mix of non-standard CSS properties for older browsers that do not support border-radius. Although CSS3 is not yet fully released, the part of the specification containing the border-radius property is considered stable. For Internet Explorer 6, 7 and 8, the CSS3 PIE plugin is used. Caution!: these properties are supported by all browsers supported by Ebase Xi with the exception of Opera 10.0, where they are ignored.
All Corners/ Top Left Corner	The radius of the top left corner, or for all corners if no other corner properties are specified.	borderRadius^2	Character	Yes	Yes	As CSS border-radius property. See examples below.
Top Right Corner	The radius of the top right corner.	borderRadius^2	Character	Yes	Yes	As CSS border-radius property. See examples below.
Bottom Right Corner	The radius of the bottom right corner. If omitted, the Top Left Corner value is used.	borderRadius^2	Character	Yes	Yes	As CSS border-radius property. See examples below.
Bottom Left Corner	The radius of the bottom left corner. If omitted, the Top Right Corner value is used.	borderRadius^2	Character	Yes	Yes	As CSS border-radius property. See examples below.

¹ See Accessing control properties from scripts

Examples of setting properties via API based language:

controls.PANEL1.borderWidth = "2px";

controls.PANEL1.borderStyle = "Solid";

controls.PANEL1.borderColor = "#999999";

Examples of setting properties via FPL:

PANEL1.borderWidth = '2px';

PANEL1.borderStyle = 'Solid';

PANEL1.borderColor = '#999999';

² All Border Radius corner properties are merged into a single borderRadius CSS property at runtime which contains all four corners top left, top right, bottom right, bottom left as a list of values delimited by spaces. All four properties are set using a single script assignment statement e.g.

API:

controls.PANEL1.borderRadius = "20px 40px 40px 80px";

controls.PANEL1.borderRadius = "20px 40px";

controls.PANEL1.borderRadius = "20px";

FPL:

PANEL1.borderRadius = '20px 40px 40px 80px';

PANEL1.borderRadius = '20px 40px';

PANEL1.borderRadius = '20px';

³ A known problem exists with the Border Radius property with IE7 or IE8 when a parent of the control with the curved border has a background color or background image specified. In this circumstance, the border appears briefly in the browser and then disappears. The bypass to this problem is to specify relative positioning of the control as follows:

For the control which has the curved border:

· Click the Advanced Properties button from the Styling Assistant

· Select the All Properties tag

· Under the Position heading, set the position attribute to relative