Beautiful Design App

Project Showcase
620

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
Screen Shot 2021-06-06 at 9.57.37 PM720×1116 127 KB

Screen Shot 2021-06-06 at 9.57.46 PM
Screen Shot 2021-06-06 at 9.57.46 PM1332×940 100 KB 

<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;
}
18 Likes