How to create line with curve in the middle in css

Question

I need to create a line in pure CSS with a dimple in the middle. Is it possible? If so, how might I do this?

The CSS rules that I'm familiar to make the entire div to semicircular or change element border.

For example: border-radius, or perspective or border-top-radius...

Andy Hoffman · Accepted Answer · 2019-03-10 05:21:14Z

4

Here's my take using absolutely-positioned pseudo content and a relative container. I create an oval shape in the ::after content and hide the top half of it using overflow: hidden.

.thing {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.thing::before,
.thing::after {
  content: '';
  z-index: 1;  
  position: absolute;
}

.thing::before {
  border-top: 2px solid black;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;  
}

.thing::after {
  border-radius: 60%;
  left: 20px;
  right: 20px;
  height: 300px;
  border: 2px solid black;
  top: -234px;
  background-color: white;
}

html { margin: 3em; }

<div class="thing"></div>

jsFiddle

edited Mar 10, 2019 at 5:21

answered Mar 10, 2019 at 5:08

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Temani Afif · Accepted Answer · 2019-03-10 10:21:45Z

3

You can consider multiple background. A radial-gradient for the curve and linear-gradient for the small lines:

.box {
  width:300px;
  height:200px;
  background:
     linear-gradient(#000,#000) top left/70px 5px,
     linear-gradient(#000,#000) top right/70px 5px,
    
    
     radial-gradient(circle 100px, /*circle with 100px radius*/
       transparent calc(100% - 6px), #000 calc(100% - 5px), /*around 5px border*/
       #000 99%,transparent 100%)
      0 -150px; /*we move the centre of the circle by -150px to top*/
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

You can add CSS variable to better control the different values. I will consider another syntax to better control the top lines using another radial-gradient that will be the same as the main one but with a reduce size so we only see a small part of it and we keep its last color to be black to have our lines.

.box {
  --b:5px; /*border*/
  --r:100px; /*radius*/
  --p:50px; /*offset from top */
  height:100px;
  background:
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 100%)
      0 0/100% var(--b),
    
     radial-gradient(circle var(--r)
       at 50% calc(-1*var(--p)), 
       transparent calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)), 
       #000 99%,transparent 100%);
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box" style="--rad:80px;--p:20px;"></div>

<div class="box" style="--rad:50px;--p:20px;--b:2px"></div>

<div class="box" style="--rad:100px;--p:70px;--b:8px"></div>

edited Mar 10, 2019 at 10:21

answered Mar 10, 2019 at 8:54

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

3 Comments

Temani Afif Over a year ago

@velvetInk if we understand the trick, it can be very easy ;)

Andy Hoffman Over a year ago

You're so good at radial gradients! I need to read up on them. Do you have any preferred learning resource?

Temani Afif Over a year ago

@AndyHoffman not really, I generally use the official spec to understand the different values and how it works(drafts.csswg.org/css-images-3/#radial-gradients) then I try to play with them in order to achieve different things.

A.Abdelhak · Accepted Answer · 2019-03-10 05:06:57Z

-1

its not possible with border-radius , try with clip-path

answered Mar 10, 2019 at 5:06

A.Abdelhak

1404 bronze badges

1 Comment

velvetInk Over a year ago

do you have an example? with a line going all the way across

Collectives™ on Stack Overflow

How to create line with curve in the middle in css

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related