# border

* :blue\_book: [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) - shorthand for [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width), [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style), [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
* :blue\_book: [border-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)

## example

{% tabs %}
{% tab title="border vs. outline" %}
{% embed url="<https://codepen.io/lochiwei/pen/abWeVqP>" %}

{% endtab %}

{% tab title="CSS" %}

```css
.flex {

    width: 300px;
    height: 200px;
    box-sizing: border-box;
    background-color: white;
    
    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin: 30px auto;

    /* ⭐️ border */
    border: 5px solid black;

    /* ⭐️ outline */
    outline: 5px solid orange;
    outline-offset: 0.5rem;

    /* ⭐️ box-shadow */
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 1px 1px 6px 1px rgba(46, 49, 0, 0.89);
}
```

{% endtab %}
{% endtabs %}