## Style the Element container

Style the container you mount an [Element](https://docs.stripe.com/js/element.md) to as if it were an `<div>` on your page. For example, to control `padding` and `border` on an `Element`, set these properties on the container. This is usually done by re-using the classes that you have applied to your DOM `<div>` elements.

After the `Element` is mounted, the `.StripeElement` class is added to the container. Additionally, the following classes are automatically added to the container when the `Element` is complete, empty, focused, invalid, or autofilled by the browser:

*   `.StripeElement--complete`
*   `.StripeElement--empty`
*   `.StripeElement--focus`
*   `.StripeElement--invalid`
*   `.StripeElement--webkit-autofill` (Chrome and Safari only)

These class names can be customized using the `classes` [option](https://docs.stripe.com/js/elements_object/create_element.md#elements_create-options-classes) when you [create an Element](#elements_create).

### Example

```html
<div id="card-element" class="stripe-card-element"></div>
```

```css
.stripe-card-element {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.stripe-card-element.StripeElement--focus {
  border-color: #007bff;
  box-shadow: 0 0 0 1px #007bff;
}

.stripe-card-element.StripeElement--invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 1px #dc3545;
}
```