Documented Properties: (listed in the SAC CSS menu)
border, border-top, border-right, border-bottom, border-left, opacity
* Descendants: N/A;
* Pseudos:N/A;
Undocumented Style Parameters:
border: double
border: groove
border: ridge
border: solid
border: dashed
border: dotted
Solid border
Applies a solid border to a widget.
.my-css-class .sap-custom-panel-widget {
border: 6px solid rgb(0, 0, 0); }
/* Solid black border, 6px wide all-round the widget
Code language: JavaScript (javascript)
Top border
Applies a solid top border to a widget.
.my-css-class .sap-custom-panel-widget {
border-top: 6px solid rgb(0, 0, 0); }
Code language: JavaScript (javascript)
Left border
Applies a solid top border to a widget.
.my-css-class .sap-custom-panel-widget {
border-left: 6px solid rgb(0, 0, 0); }
Code language: JavaScript (javascript)
Bottom border
Applies a solid bottom border to a widget.
.my-css-class .sap-custom-panel-widget {
border-bottom: 6px solid rgb(0, 0, 0); }
Code language: JavaScript (javascript)
Right border
Applies a solid bottom border to a widget.
.my-css-class .sap-custom-panel-widget {
border-right: 6px solid rgb(0, 0, 0); }
Code language: JavaScript (javascript)
Double lined border
Applies a double border to a widget
.my-css-class .sap-custom-panel-widget {
border: 6px double rgba(34, 54, 73, 0.5); }
Code language: JavaScript (javascript)
Ridge border
Applies a ridge border to a widget.
.my-css-class .sap-custom-panel-widget {
border: 10px ridge rgba(0, 0, 0, 0.8); }
Code language: JavaScript (javascript)
Dashed border
Applies a dashed border to a widget.
.my-css-class .sap-custom-panel-widget {
border: 10px dashed rgba(0, 0, 0, 0.8); }
Code language: JavaScript (javascript)
Apply multiple border styles in a CSS class
Lines, colour, dots & dashes
.my-css-class .sap-custom-panel-widget {
border-top:4px solid #FFC933;
border-right: 4px dashed #CCC;
border-bottom: 4px dotted rgba(0, 0, 0, 0.3);
border-left: 4px solid rgb(100, 100, 255);
}
Code language: JavaScript (javascript)
Groove border
Applies a groove bottom border to a widget.
.my-css-class .sap-custom-panel-widget {
border: 10px groove rgba(0, 0, 0, 0.8); }
Code language: JavaScript (javascript)
Dotted border
Applies a dotted bottom border to a widget.
.my-css-class .sap-custom-panel-widget {
border: 10px dotted rgba(0, 0, 0, 0.8); }
Code language: JavaScript (javascript)
Dotted border
Applies colour to top and bottom 20px wide borders
.my-css-class.sap-custom-panel-widget {
border-top: 20px solid rgba(255, 201, 51, 0.9);
border-bottom: 20px solid red;
}
Code language: JavaScript (javascript)