Merge pull request #21 from DHTMLX/styled-border-for-cells-3792

[add] styled cells borders section into user guide, update related docs

Author: mafanya23

docs/api/spreadsheet_parse_method.md

@@ -253,7 +253,7 @@ A CSS class is set for a cell via the **css** property.
 
 ### List of properties
 
-The list of properties you can specify in the **style** object:
+The list of properties you can specify in the **styles** object:
 
 - *background*
 - *color*
@@ -263,6 +263,7 @@ The list of properties you can specify in the **style** object:
 - *fontWeight*
 - *fontStyle*
 - *multiline: "wrap"* (from v5.0.3)
+- *border*, *border-right*, *border-left*, *border-top*, *border-bottom* (from v5.2)
 
 :::note
 You may also use the following properties if needed:

docs/api/spreadsheet_setstyle_method.md

@@ -23,7 +23,7 @@ setStyle(cell: string, styles: array | object): void;
 ### Parameters
 
 - `cell` -  (required) the id(s) of a cell(s) or a range of cells
-- `style` - (required) styles that should be applied to cells. [Check the list of properties which you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) 
+- `styles` - (required) styles that should be applied to cells. [Check the list of properties which you can use to style cells](api/spreadsheet_parse_method.md#list-of-properties) 
 
 ### Example
 

docs/assets/clear_cells_border.png

@@ -91,4 +91,22 @@ To clear styles applied to data in a cell, or values entered into cells, or remo
 - Right-click the selection to call the context menu.
 - Choose the **Clear** option and then select one of the options in the drop-down list:
 
-![Clear option](assets/clear_option.png)
+![Clear option](assets/clear_option.png)
+
+## Styled borders for cells
+
+You can add a styled border(s) for a cell or a group of cells. 
+
+### Setting styled borders
+
+- Select the necessary cell or a group of cells to set a styled border(s) for
+- Click the **Border** button in the toolbar and choose the desired type of border, its color and style
+
+![Styled border](assets/styled_cell_border.png)
+
+### Removing styled borders 
+
+- Select the necessary cell or a group of cells from which you want to remove styled borders
+- Click the **Border** button in the toolbar and choose the *Clear borders* option
+
+![Clear border](assets/clear_cells_border.png)

docs/assets/styled_cell_border.png

@@ -26,7 +26,10 @@ spreadsheet.setValue("B6,A1:D1",5);
 spreadsheet.setValue("A1:D1",[1,2,3]);
 ~~~
 
-{{note Please note that the method allows setting the same/repeated value(s) for the specified cells. In case you want to add different values into spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method.}}
+:::note
+Please note that the method allows setting the same/repeated value(s) for the specified cells. In case you want to add different values into spreadsheet cells, you'd better use the [`parse()`](api/spreadsheet_parse_method.md) method.
+:::
+
 
 ### Get values
 
@@ -57,7 +60,7 @@ spreadsheet.setValidation("B10:B15", ["Apple", "Mango", "Avocado"]);
 The drop-down list will limit the choice of the end user. It will show the *Invalid value* message when the user completes a cell with an unexpected value.
 
 :::info
-The [](api/spreadsheet_setvalidation_method.md) method can also remove validation from the specified cells. [Check the details](../api/spreadsheet_setvalidation_method/#details).
+The [`setValidation()`](api/spreadsheet_setvalidation_method.md) method can also remove validation from the specified cells. [Check the details](../api/spreadsheet_setvalidation_method/#details).
 :::
 
 ## Inserting a hyperlink into a cell
@@ -85,7 +88,7 @@ spreadsheet.insertLink("A2");
 You can apply certain styling to a cell or a range of cells via the [](api/spreadsheet_setstyle_method.md) method. It takes two parameters:
 
 - **cells** - (*string*) the id(s) of a cell(s) or a range of cells
-- **style** - (*object/array*) styles that should be applied to cells
+- **styles** - (*object/array*) styles that should be applied to cells
 
 ~~~jsx
 // setting style for one cell
@@ -98,7 +101,9 @@ spreadsheet.setStyle("B6,A1:D1", {color: "blue"});
 spreadsheet.setStyle("A1:D1", [{color: "blue"}, {color: "red"}]);
 ~~~
 
-{{note The method allows setting the same style for the specified cells. In case you want to apply different styles to spreadsheet cells, you'd better use the [](api/spreadsheet_parse_method.md) method.}}
+:::note 
+The method allows setting the same style for the specified cells. In case you want to apply different styles to spreadsheet cells, you'd better use the [`parse()`](api/spreadsheet_parse_method.md) method.
+:::
 
 ### Get styles