Creating a curved container with CSS styling

Question

Creating a curved container with CSS styling

I've attempted to create a design resembling the image below, but I'm not achieving the desired result. Can someone provide me with assistance? Any help would be greatly appreciated.

https://i.sstatic.net/J4LzC.png

<!DOCTYPE html>
        <html>
        <head>
        <style> 
        #rcorners1 {
            border-radius: 10px 90px 90px 10px / 8% 100% 100% 8%;
            background: #18b1a0;
            padding: 20px; 
            width: 200px;
            height: 150px;    
        }
        </style>
        </head>
        <body>
        <p id="rcorners1">Rounded corners!</p>
        </body>
        </html>

html css jquery-ui

Answer 1

Answer №1

Inspired by a suggestion from @Krusader, you may consider including position: relative; in #rcorners1. Additionally, you can introduce a pseudo element (::after) with the following CSS properties:

#rcorners1::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 30px;
height: 80%;
background-color: green;
border-radius: 100%;
}

By incorporating these changes, your CSS will appear as follows:

#rcorners1 {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 200px;
height: 150px;   
border-radius: 10px 90px 90px 10px / 8% 100% 100% 8%;
overflow: hidden;
}
#rcorners1::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 30px;
height: 80%;
background-color: green;
border-radius: 100%;
}

I trust this information is beneficial to you.

Answer 2

Inspired by a suggestion from @Krusader, you may consider including position: relative; in #rcorners1. Additionally, you can introduce a pseudo element (::after) with the following CSS properties:

#rcorners1::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 30px;
height: 80%;
background-color: green;
border-radius: 100%;
}

By incorporating these changes, your CSS will appear as follows:

#rcorners1 {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 200px;
height: 150px;   
border-radius: 10px 90px 90px 10px / 8% 100% 100% 8%;
overflow: hidden;
}
#rcorners1::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 30px;
height: 80%;
background-color: green;
border-radius: 100%;
}

I trust this information is beneficial to you.

Answer 3

Answer №2

Could this be of assistance? ::

#rcorners1 {
    border-radius: 10px ;
    background: #18b1a0;
    padding: 20px; 
    width: 200px;
    height: 150px;  
    position: relative;
}

#rcorners1:after {
  content: '';
  background: #18b1a0;
  padding: 20px;
  width: 10px;
  height: 150px;
  position: absolute;
  right: -20px;
  z-index: -1;
  top: 0;
  border-radius: 0px 36px 36px 0;
}

Answer 4

Could this be of assistance? ::

#rcorners1 {
    border-radius: 10px ;
    background: #18b1a0;
    padding: 20px; 
    width: 200px;
    height: 150px;  
    position: relative;
}

#rcorners1:after {
  content: '';
  background: #18b1a0;
  padding: 20px;
  width: 10px;
  height: 150px;
  position: absolute;
  right: -20px;
  z-index: -1;
  top: 0;
  border-radius: 0px 36px 36px 0;
}

Answer 5

Answer №3

If you're looking for an alternative approach to the pseudo-element techniques, one option is to utilize the radial-gradient method (as suggested by Krusader in the comments). By combining two distinct radial-gradient effects as the background-image, you can achieve a dark shadow on one side and a curved border on the other. Adjusting the transparency levels will be essential to ensure the transition appears smooth and balanced.

Consider this example:

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

.box {
  width: 190px;
  height: 109px;
  box-sizing: border-box;
  font-family: Inconsolata;
  font-size: 18px;
  background-image: radial-gradient(circle at -52%, rgba(0,0,0,0.25) 36%,  transparent 37%), 
                    radial-gradient(circle at 29%, #18b1a0 88%, transparent 89%);
  border-radius: 6px 25px 25px 6px;
  color: white;
  text-align:center;
  padding-top:36px;
}

<div class="box">SECRET<br/>CHAMBER</div>

Answer 6

If you're looking for an alternative approach to the pseudo-element techniques, one option is to utilize the radial-gradient method (as suggested by Krusader in the comments). By combining two distinct radial-gradient effects as the background-image, you can achieve a dark shadow on one side and a curved border on the other. Adjusting the transparency levels will be essential to ensure the transition appears smooth and balanced.

Consider this example:

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

.box {
  width: 190px;
  height: 109px;
  box-sizing: border-box;
  font-family: Inconsolata;
  font-size: 18px;
  background-image: radial-gradient(circle at -52%, rgba(0,0,0,0.25) 36%,  transparent 37%), 
                    radial-gradient(circle at 29%, #18b1a0 88%, transparent 89%);
  border-radius: 6px 25px 25px 6px;
  color: white;
  text-align:center;
  padding-top:36px;
}

<div class="box">SECRET<br/>CHAMBER</div>

Answer 7

Answer №4

Discover a variety of shapes for inspiration. https://css-tricks.com/examples/ShapesOfCSS/

Your code has been updated.

#rcorners1:after {

  bottom: 10px;
content: "";
position: absolute;
top: 10px;
left: 0;
width: 50px;
left: -35px;
background-color: #098a7c;
border-radius: 70px 100% 100% 70px;
}

#rcorners1 {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 200px;
overflow: hidden;
height: 150px;   
border-radius: 10px 130px 130px 10px / 10px 100% 100% 10px;
}

<p id="rcorners1">Rounded corners!</p>

Answer 8

Discover a variety of shapes for inspiration. https://css-tricks.com/examples/ShapesOfCSS/

Your code has been updated.

#rcorners1:after {

  bottom: 10px;
content: "";
position: absolute;
top: 10px;
left: 0;
width: 50px;
left: -35px;
background-color: #098a7c;
border-radius: 70px 100% 100% 70px;
}

#rcorners1 {
position: relative;
background: #18b1a0;
padding: 20px; 
width: 200px;
overflow: hidden;
height: 150px;   
border-radius: 10px 130px 130px 10px / 10px 100% 100% 10px;
}

<p id="rcorners1">Rounded corners!</p>

Answer 9

Answer №5

#container {
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
  overflow: hidden;
  }

  #right-corner-large,
  #right-corner-small {
  display: inline-block;
  width: 250px;
  height: 125px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  margin: 0;
  }

  #right-corner-large {
  background-color: lightcoral;
  }

  #right-corner-small {
  background-color: red;
  position: absolute;
  top: 0;
  left: -240px;
  }

<div id="container">
<p id="right-corner-large"></p>
<p id="right-corner-small"></p>
</div>

Answer 10

#container {
  border: 1px solid red;
  width: 500px;
  height: 250px;
  position: relative;
  overflow: hidden;
  }

  #right-corner-large,
  #right-corner-small {
  display: inline-block;
  width: 250px;
  height: 125px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  margin: 0;
  }

  #right-corner-large {
  background-color: lightcoral;
  }

  #right-corner-small {
  background-color: red;
  position: absolute;
  top: 0;
  left: -240px;
  }

<div id="container">
<p id="right-corner-large"></p>
<p id="right-corner-small"></p>
</div>

Creating a curved container with CSS styling

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

When sending an ajax request with HTML data as the payload

What are the steps to ensure that the content within the <pre><code></code></pre> tags displays correctly in Internet Explorer 7?

Designing a structure with three fieldset components

Tips for fixing CORS error when working with the fetch API

Trouble with flex wrap in my design template using Material UI

Title: "Customizing Labels on Stack Bars and Lines in D3.js Visualization"

Tips for hiding the initial value in an HTML Select tag

What is the best way to eliminate the space following the image?

Issues with centering background-position while using clip-path functionality

Developing Angular 6 for dynamic HTML navigation tabs

Is there a way to right-align the labels and input fields simultaneously?

Convert JSON objects within an array into HTML format

Unable to decipher Material UI class names

Creating content on HTML AzureWebApp for transfer to CDS

Is there a way to automatically update the input value when I refresh the page following a click event?

Exploring the World of Bootstrap 4 Cards

I am currently working on developing an HTML and JavaScript audio player that can play audio at specific scheduled times

JQuery - stylish vertical accordion navigation menu

Tips for aligning a Bootstrap container in the middle of the viewport vertically

Tips for avoiding cursor sticking in css rotate transform in firefox?