How do I make a double curve border?

Viewed 46

I want to achive this kind of design.

enter image description here

So far this is my code (https://codepen.io/aceraven777/pen/BaWeJer)

My code:

body {
  background-color: #122026;
  color: #fff;
}

.wrapper {
  width: 1000px;
  margin: auto;
}

.first-part {
  border-left: 10px solid white;
  border-bottom: 10px solid white;
  border-radius: 0 0 0 20px;
  margin-bottom: -10px;
  padding: 20px;
}

.second-part {
  border-right: 10px solid white;
  border-top: 10px solid white;
  border-radius: 0 20px 0 0;
  padding: 20px;
}
<div class="wrapper">
  <div class="first-part">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
    sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
    pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
    sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
    feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
    varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
  </div>

  <div class="second-part">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
    sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
    pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
    sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
    feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
    varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
  </div>
</div>

1 Answers

You could achieve this with additional elements that are used as mask.

  • two small masks with the same background-color like the body for hiding the unwanted part of the horizontal border
  • and one mask with tranparent background to repaint the rounded border from .first-part because the first mask is covering also the rounded border (not only the unwanted part)

You could also use masks for the little circles.

body {
  background-color: #122026;
  color: #fff;
}

.wrapper {
  width: 1000px;
  margin: auto;
}

.first-part {
  position: relative;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
  border-radius: 0 0 0 20px;
  margin-bottom: -10px;
  padding: 20px;
}

.second-part {
  position: relative;
  border-right: 10px solid white;
  border-top: 10px solid white;
  border-radius: 0 20px 0 0;
  padding: 20px;
}

.mask {
  background-color: #122026;
}

#first-mask {
  position: absolute;
  bottom: -11px;
  right: 0;
  width: 20px;
  height: 12px;
}

#second-mask {
  position: absolute;
  top: -11px;
  left: 0;
  width: 20px;
  height: 12px;
}

#border-mask {
  position: absolute;
  top: 0;
  left: -10px;
  width: 50%;
  height: 100%;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
  border-radius: 0 0 0 20px;
  z-index: 10;
}

.circle {
  background-color: #122026;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 10px solid white;
  border-radius: 50%;
  z-index: 20;
}

#first-circle {
  top: 55%;
  left: -25px;
}

#second-circle {
  top: -25px;
  right: 10%;
}
<div class="wrapper">
  <div class="first-part">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
    sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
    pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
    sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
    feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
    varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
    <div id="first-mask" class="mask"></div>
    <div id="border-mask"></div>
    <div id="first-circle" class="circle"></div>
  </div>

  <div class="second-part">
    <div id="second-mask" class="mask"></div>
    <div id="second-circle" class="circle"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
    sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
    pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
    sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
    feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
    varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
  </div>
</div>

Related