---
title: "Border atom | GoodBarber's Design System"
description: "This atom allows defining the properties related to outlines, their color and their size."
canonical_url: "https://www.goodbarber.com/uxdesign/atom-border/"
lang: pt
---

# Border atom | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Border atom

Atomic Components

The border atom defines the properties of the outline of an element, such as its color and size. It helps highlight the shape that has been applied to the component.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_border.382555aab638.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_border.382555aab638.mp4)

![](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Border.92348ca89b56.gif)

#### JSON

Here’s the JSON format of this object :

```
{

 "color": COLOR OBJECT,

 "size": INTEGER // Line width in pixels, default value is 1

}
```

### Documentation

#### Default value

By default, the Atom Border value is **1px**, but it can be customized in the JSON. It can also vary depending on the settings of the predefined themes.

![Example of the application of the border atom](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Border-still.f3408a1838bd.png)

*Example of the application of the border atom*

#### Behavior

Some components can receive different contour sizes depending on their condition.

*Below, the behavior of a Textfield going from an Inactive state to Active*

![Border on text field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Border-TextField.259fa59932b0.gif)

*Border on text field state*

#### Distribution

Certain components won’t be able to receive the Atom on their 4 sides

![Border on navigation elements](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Border-Distribution.6d4cc5c8b54a.gif)

*Border on navigation elements*

### Example

[Atoms-Border-Video](https://player.vimeo.com/video/764851205?h=87d0fd9596&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)