# MultiRow Styling Records Groups and Cells

Learn how to style records inside MultiRow in this tutorial

## Content

 In most of the applications, you would want to show where each record and group starts or ends. The **MultiRow** control enables this by adding CSS class names to cell elements in the first and last row/column of each group. The class names are `wj-record-start`, `wj-record-end`, `wj-group-start`, and `wj-group-end`.

The example below shows how you can use these class names in CSS rules to customize the appearance of the record and group delimiters. It also shows how you can use the standard **cssClass** property to customize the appearance of specific cells within groups.

```css
/* custom styling for a MultiRow */

.multirow-css .wj-cell.wj-record-end:not(.wj-header) {
    border-bottom: 1px solid #000; /* thin black lines between records */
}
.multirow-css .wj-cell.wj-group-end {
    border-right: 2px solid #00b68c; /* thick green lines between groups */
}
.multirow-css .wj-cell.id {
    color: #c0c0c0;
}
.multirow-css .wj-cell.amount { 
    color: #014701;
    font-weight: bold;
}
.multirow-css .wj-cell.email {
    color: #0010c0;
    text-decoration: underline;
}                            
```
The **cssClass** property can be added in the **layoutDefinition**. 
```javascript
import * as wjMultiRow from '@mescius/wijmo.grid.multirow';

var styleMultirow = new wjMultiRow.MultiRow('#styleMultirow', {
    itemsSource: appData.orders,
    layoutDefinition: [
        {
            header: 'Order', colspan: 2, cells: [
                { binding: 'id', header: 'ID', colspan: 2, cssClass: 'id' },
                { binding: 'amount', header: 'Amount', format: 'c', colspan: 2, cssClass: 'amount' },
                { binding: 'date', header: 'Ordered' },
                { binding: 'shippedDate', header: 'Shipped' }
            ]
        },
        {
            header: 'Customer', colspan: 3, cells: [
                { binding: 'customer.name', header: 'Name' },
                { binding: 'customer.email', header: 'EMail', colspan: 2, cssClass: 'email' },
                { binding: 'customer.address', header: 'Address', colspan: 2 },
                { binding: 'customer.phone', header: 'Phone' },
                { binding: 'customer.city', header: 'City', dataMap: cityMap },
                { binding: 'customer.state', header: 'State', width: 45 },
                { binding: 'customer.zip', header: 'Zip' },
            ]
        },
        {
            header: 'Shipper', cells: [
                { binding: 'shipper.name', header: 'Shipper' },
                { binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
                { binding: 'shipper.express', header: 'Express' }
            ]
        }
    ]
});
```