Question 407639 in CSS Question posted in
Some basic documentation can be found here.

How to draw a curve border in css

I want to create the same border that attached below this post with the only CSS. Is this possible? If so, how can it be done?

My code and I want to create it by .curve::after {}:

<ul>
  <li class="curve"></li>
</ul>

I want to create the same curve border

Thank you!

Tags:

2

Answers


  1. 0

    I was only able to build the following for you as there are not enough details in the question. Modify this according to your desire:

    ul {
  list-style: none;
}

.curve {
  width: 300px;
  padding: 30px;
  margin: 30px;
  border-bottom: 2px dashed #ccc;
  position: relative;
}

.curve::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-bottom: 2px dashed #ccc;
  border-left: 2px dashed #ccc;
  transform: rotate(360deg);
  border-bottom-left-radius: 50%;
}

.curve::after {
  content: "";
  position: absolute;
  bottom: -32px;
  right: -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-bottom: 2px dashed #ccc;
  border-right: 2px dashed #ccc;
  transform: rotate(270deg);
  border-bottom-right-radius: 50%;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Curve Border</title>
  </head>
  <body>
    <ul>
      <li class="curve"></li>
    </ul>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    For such things, you should simply use an SVG

    <svg width="100%" width="100%" viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0
           C 0 0, 0 50, 50 50
           L 50 50, 950 50
           C 950 50, 1000 50, 1000 100"        
        stroke="gray"
        stroke-width="3" 
        stroke-dasharray="10,10" 
        fill="transparent"/>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search