# Signature Appearance

The Signature provides predefined appearance options such as stroke color and width, rounded corners and fill modes.

> Since [version 22.1.0](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui#v22.1.0), default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
>
> For more information, refer to the [Design System documentation](https://www.telerik.com/design-system).

The following example demonstrates all available appearance options of the Signature in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/signature/appearance/all-options/source.txt)

## Stroke Width

The Signature allows you to control the line thickness width through the [`strokeWidth`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#strokewidth) property.

The following example demonstrates how to define the stroke width of the Signature.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/signature/appearance/stroke-width/source.txt)

## Colors

The Signature allows you to control the line and background color through the [`color`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#color) and [`backgroundColor`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#backgroundcolor) properties.

The color option supports the following formats:

| Format           | Description                                                                                                                  |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| red              | The [basic](http://www.w3.org/TR/css3-color/#html4) or [extended](http://www.w3.org/TR/css3-color/#svg-color) CSS Color name |
| `#ff0000`        | The Hex RGB value                                                                                                            |
| `rgb(255, 0, 0)` | The RGB value                                                                                                                |

The following example demonstrates how to define the Signature colors.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/signature/appearance/color/source.txt)

## Size

The Signature allows you to set different padding on the internal controls. To achieve this utilize the [`size`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#size) property. It accepts values of type [`InputSize`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/inputsize).

The [`size`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#size) option supports the following values:

* `small`
* `medium`
* `large`

## Rounded Corners

The Signature enables you to apply different border radius to the component through the [`rounded`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#rounded) property. It accepts values of type [`InputRounded`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/inputrounded).

The [`rounded`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#rounded) option supports the following values:

* `small`
* `medium`
* `large`
* `full`
* `none`

## Fill Mode

The Signature allows you to set different fill modes by using the [`fillMode`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#fillMode) property. It accepts values of type [`InputFillMode`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/inputfillmode).

The [`fillMode`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent#fillMode) option supports the following values:

* `flat`
* `solid`
* `outline`

## Suggested Links

* [API Reference of the SignatureComponent](https://www.telerik.com/kendo-angular-ui/components/inputs/api/signaturecomponent)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder)