# How to remove small border around edge of app.layout

**URL:** <https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933>\
**Category:** Dash Python\
**Created:** [January 24, 2018, 4:56pm UTC](https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933 "2018-01-24T16:56:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbill](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@dbill](https://community.plotly.com/u/dbill)\
**Post date:** [January 24, 2018, 4:56pm UTC](https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933/1 "2018-01-24T16:56:17Z")

</div>

I’m working on the UI for my application running on plotly dash. When I set the background color there is a small border area between the window and the layout that doesn’t get colored. How do I remove this? Or is there a way to have the color go all the way to the edge of the window?

![Capture](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/4cf182f1bd93812caee7c9e46545713c458ccbfc.PNG)

I whittled the page to the basics…  
import os  
from flask import Flask  
import dash  
import dash\_html\_components as html

```
app=dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})

server = Flask( __name__ )
server.secret_key = os.environ.get('secret_key', 'secret')

app.layout = html.Div(
    [
        html.Div(
            [html.H1('Dashboard',className='six columns')],
            className='row',
        ),
    ],
    className='twelve columns',
    style={'background-color':'gray'}
)

if __name__ == ' __main__':
    app.server.run(debug=True, threaded=True)
```

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [January 25, 2018, 1:23am UTC](https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933/2 "2018-01-25T01:23:17Z")

</div>

This is a result of the browser supplying a user agent style sheet with the `<body>` element having a default margin of 8px. You can override that if you want by attaching your own CSS style sheet with the following style:

```
body {
    margin-left: 0;
    margin-right: 0;
}

```

or if you want to get rid of all margins:

```
body {
    margin: 0;
}
```

---

<div class="post-metadata">

**Author:** ![dbill](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@dbill](https://community.plotly.com/u/dbill)\
**Post date:** [January 25, 2018, 2:16am UTC](https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933/3 "2018-01-25T02:16:58Z")

</div>

Thank you very much! That did the trick.

---

<div class="post-metadata">

**Author:** ![mohammad\_aqajani](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@mohammad\_aqajani](https://community.plotly.com/u/mohammad_aqajani)\
**Post date:** [February 1, 2021, 8:02pm UTC](https://community.plotly.com/t/how-to-remove-small-border-around-edge-of-app-layout/7933/4 "2021-02-01T20:02:10Z")

</div>

according to : [https://dash.plotly.com/external-resources](https://dash.plotly.com/external-resources)

you can create assets/typography.css with below style:

body {  
margin: 0;  
}