While SizeIM is a predominantly no-code platform, when applying a border to an element through the Style Panel or My Brands, the value must be entered as a valid CSS (Cascading Stylesheets) value. These values are composed of three different properties – the border width, style and color, which should be entered in this order and separated by a single space.
The example given under the text field for the border property is as follows:
1px solid #000000
The first value represents the width of the border in pixels. The second value represents the style of the border and the third value represents the color of the border in hexadecimal format.
Width
The width portion of the border property consists of a numerical value and the desired units. Valid values for units are:
- px (pixels)
- em (relative to the font size of the element)
- rem (relative to the font size of the root element)
- pc (picas)
- vh (viewpoint percentage height – responds to image height)
- vw (viewpoint percentage width – responds to image width)
Style
The style portion of the property defines the type of line that creates the border. This can be any of the following values:
- solid
- dotted
- dashed
- double (same as solid, but with two lines)
- groove (3D grooved border)
- ridge (3D ridged border)
- inset (3D inset border)
- outset (3D outset border)
Color
The hexadecimal value for the desired border color. Can accept shorthand hexadecimal values. For example, #ccc will give the same result as #cccccc.
Examples
Taking the above into account, some valid values for borders would be as follows:
- 5px solid #000000
- 2em ridge #000
- 2rem inset #ffffff
- 2vh dashed #ffff00