# Appearance

The Signature provides a predefined set of appearance options.

Apart from the default vision of the Signature, these alternative styling options enable you to configure each individual aspect of the appearance of a Signature.

* [`strokeWidth`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#strokeWidth)
* [`color`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#color)
* [`backgroundColor`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#backgroundColor)
* [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#size)
* [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#fillMode)
* [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#rounded)

The following example demonstrates configuring different aspects of a Signature appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/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-vue-ui-develop/components/inputs/api/signatureprops#strokeWidth) property.

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/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-vue-ui-develop/components/inputs/api/signatureprops#color) and [`backgroundColor`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#backgroundColor) properties.

The color options 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-vue-ui/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-vue-ui-develop/components/inputs/api/signatureprops#size) property.

The [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#size) property supports the following values:

* `small`—Sets the `padding` of the internal element to `2px 8px`.
* `medium`—Sets the `padding` of the internal element to `4px 8px`.
* `large`—Sets the `padding` of the internal element to `6px 8px`.

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

## Fill Mode

The Signature allows you to set different fill modes by using the [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#fillMode) property.

The [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#fillMode) property supports the following values:

* `flat`—Sets a `transparent background` and `solid bottom border`.
* `solid`—Applies a `background` color and `solid borders`.
* `outline`—Sets a `transparent background` and `solid borders`.

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

## Rounded Corners

The Signature enables you to apply different `border-radius` to the component through the [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#rounded) property.

The [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#rounded) property supports the following values:

* `none`—Does not set a `border radius` className.
* `small`—Sets the `border radius` of the Signature to `1px`.
* `medium`—Sets the `border radius` of the Signature to `2px`.
* `large`—Sets the `border radius` of the Signature to `4px`.
* `full`—Sets the `border radius` of the Signature track to `9999px`.

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

## Suggested Links

* [API Reference of the Signature](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops)
* [Signature `size` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#size)
* [Signature `fillMode` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#fillMode)
* [Signature `rounded` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/signatureprops#rounded)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)