Question 240455 in Html Question posted in
Some basic documentation can be found here.

Html – rounded edges to the sides of the DIV

I’m trying to give a certain DIV (which contains other elements) rounded edges,I need the other elements inside the DIV to be affected and get the same attribute.

I don’t mean rounded corners which can be achieved with border-radius: Xpx; like this:
Text

and I don’t mean such a two-dimensional curve either,like this:
Text
I mean a 3-dimensional curve like this:
Text
A relatively simple simulation:
Text

Tags:

2

Answers


  1. 0

    One common way to achieve this is by box-shadow. here is a example:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.curved-rectangle {
  width: 300px;
  height: 200px;
  background-color: #3498db;
  /* Your desired background color */
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 5px inset white;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Curved Rectangular Effect</title>
</head>

<body>
  <div class="curved-rectangle">
    <div class="content">
      you are the best
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You can use mask-image with linear-gradient:

    body{ /* or any other wrapper */
  background: white;
}
.edge{
  justify-content: center;
  display: flex;
  align-items:center;
  font-size: 3rem;
  height: 800px;
  width: 400px;

  border-radius:30px;
  
  background: blue;
  --gradient: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%, rgba(0,0,0,0.25) 100%); /* you can modify this for your desire */
  -webkit-mask-image: var(--gradient); 
  mask-image: var(--gradient);
  
}
    <div class="edge">
   <div>
      hello
   </div>
</div>

    Related: Using CSS, can you apply a gradient mask to fade to the background over text?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search