# Beautiful Design App

**URL:** https://community.glideapps.com/t/beautiful-design-app/16191
**Category:** Project Showcase
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")
**Posts on this page:** 1
**Showing post:** 620

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [June 7, 2021, 2:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/620 "2021-06-07T02:06:53Z")

</div>

Check this out! Using CSS to turn our `Separator: Small` into a divider that rounds out the components above and below!

Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43);

 ![Screen Shot 2021-06-06 at 9.57.37 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed68c7b71b1086bbcddd4e5ce7bab4a409cd0054.png)

 ![Screen Shot 2021-06-06 at 9.57.46 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/782914c7591350e0a116179ffdfd849906a65e1a.png)

```auto
<pre><span><style>
[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
}

[data-test="app-hr"]:after {
  content: "";
  position:absolute;
  top:-40px;
  right:0;
  height:40px;
  width: 100%;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background:#fff;
  box-shadow: 0 15px 0 0 rgb(246, 246, 246);
  z-index:-1 !important;
}

[data-test="app-hr"]:before {
  content: "";
  position:absolute;
  top:15px;
  right:0;
  height:40px;
  width: 100%;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background:#fff;
  box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
  z-index:-1 !important;
}

```

---

_[View the full topic](https://community.glideapps.com/t/beautiful-design-app/16191)._