---
title: Defining a Component Style
framework: applenews
role: article
role_heading: Article
path: applenews/defining-a-component-style
---

# Defining a Component Style

Set style options for the components in your article.

## Overview

Overview You can use component styles to add interest and variety to your article and to make some content easier to read. Component styles include: Background color. Set a background color for the component. Corner radius. Apply rounded corners to a component by using the mask property in ComponentStyle. Fill. Use an image or video for a component background, or set a gradient fill that transitions from one color to another. Opacity. Set the opacity for a component from completely opaque to completely transparent. Border. Set the border color, width, and style for a component or for a table cell. Table style. Specify the styling (color, stroke style, text style, and so on) that you want for the rows, columns, and cells of a data or HTML table. Define a Style To use a component style once, simply include a ComponentStyle object as the value of the individual component’s style property. To define a style for multiple components: In the ArticleDocument.componentStyles object, include a property with a name that you define and a ComponentStyle object value. Use the name you defined as the value of the individual componentʼs style property. For more about properties and objects, see JSON Concepts and Article Structure.

## See Also

### Component Style Basics

- [ComponentStyle](applenewsformat/componentstyle.md)
- [CornerMask](applenewsformat/cornermask.md)
- [Border](applenewsformat/border.md)
- [StrokeStyle](applenewsformat/strokestyle.md)