Border, or borderlines, refer to the visual boundaries or outlines used to separate and distinguish elements like the parts of your microsite (headers, navigation menus, footer area), section types (grid, text, accordion) containers (overlays, previewers), buttons, etc.
Different properties can be customized in CSS to better use the borders of the different elements on your site:
Border Color
This property sets the color of the border. You can specify a color name (e.g., "red"), a hexadecimal value (e.g., "#FF0000"), an RGB value (e.g., "rgb(255, 0, 0)"), or other color representations.
Border Width
This property sets the thickness or width of the borderline. You can use pixel values (e.g., "2px"), em units, percentage values, or other valid CSS length units.
Border Style
This property defines the style of the borderline, such as solid, dashed, dotted, double, groove, ridge, inset, outset, or none. The style determines the appearance of the borderline.
Border Radius
This property allows you to create rounded corners for the border. By specifying a radius value, you can give the border a curved appearance. This property is particularly useful for creating aesthetically pleasing designs.
.custom-border {
border: 2px solid #000000;
border-radius: 5px;
}
In the example above, the element with the class "custom-border" will have a black solid border with a width of 2 pixels and a border radius of 5 pixels.
Borders can be customized further by adjusting the color, width, style, and radius values according to the design requirements of your site.
You may also refer to our CSS Wiki page for more border tile options.