My div element isn't responding to border radius adjustments on the top left and right corners

I'm trying to achieve curved corners at the top left and top right of my div, but the border-top-left-radius and border-top-right-radius properties don't seem to work for me.

Here is the HTML code:

 <div id="trape"></div>

And the CSS code:

#trape{
    border-bottom: 100px solid red;
    border-left: 0 solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    border-top-left-radius:5px;
    border-top-right-radius:10px;
}

I am aiming for an output similar to the image linked below

https://i.sstatic.net/C5fSe.jpg

css

Answer №1

If you want to create rounded corners using CSS, you can utilize the properties border-top-left-radius and border-top-right-radius like this:

#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}


#trape{
background-color: #E0E0E0;
border-left: 0 solid transparent;
border-top-left-radius: 2em;
border-top-right-radius: 10em;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
width: 200px;
}
<div id="trape">Abstract Murals</div>

Hopefully, this code snippet is useful for your design needs :)

Answer №2

Here is the solution to your issue.

.container {
  padding: 15px;
  background: #f0f0f0;
}
.box {
  width: 200px;
  height: 80px;
  padding: 25px;
  background: #fff;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
}
<div class="container">
  <div class="box">
    Your content can be placed here
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to adjust the button's position based on the location of the cursor?

I am just starting to learn JavaScript, so I am not yet familiar with all the commands involved. I have a code that includes a button which scrolls back to the top of the page, but I was wondering if there is a way to change the position of that button bas ...

htmlcssbuttonpositioncursor

Designing a dropdown menu using CSS

Currently, I am facing a requirement to create a menu that should resemble the image provided below. In the past, I have experience working on simple drop-down menus, but this time the specifications are a bit unique. The top menu links should change colo ...

cssdrop-down-menumenu

Is there a way to change the text color of a table when hovering over an image using Javascript?

UPDATE: I believe I have solved the issue! However, if anyone has suggestions on a better way to achieve this, I am open to learning. I'm still fairly new to Javascript! I have an image and a table containing text. My goal is to change the color of S ...

javascripthtmlcsscolors

Center text vertically in a textarea

Is it feasible to vertically center the content of a <textarea> within a multi-line search box while keeping everything aligned in the middle? ...

htmlcss

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

javascripthtmlcssnode.jsexpress

Challenge with the Bootstrap 3 grid structure involving nesting

On my .aspx page, I have the code snippet below: .cDiv { background-color: gray; } .tColor { background-color:yellow; } .tColor2 { background-color:blue; } <div class="container"> <div class="row"> <div class="col-sm-9 tColor" ...

csstwitter-bootstrap-3bootstrap-grid

Tips on updating the initial value of a select box or placeholder?

Here is a select input: <select name="" id=""> <option disabled hidden selected value=""> default </option> <option value="2">2</option> <option value="3">3</option> <option value="3">3</option> ...

htmlcss

Divide a page into two equal halves

I have been working on the code below. The circular icons function as navigation buttons. The collapsible list is located in the second div. My goal is to align the list to the right side of the navigation buttons. Despite trying to wrap the divs and us ...

phphtmlcss

Encircling the most recently selected image with a border

I have successfully made some <img> elements act like <input type="radio"> buttons and now I want to visually indicate the user's selection by adding a border around the chosen image. My challenge is that there are multiple rows of images ...

javascriptjqueryhtmlcss

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

The Firefox browser is not fully displaying the button background

Having an issue with a button that doesn't completely fill up on Firefox only. Here's the problem in action: This is how it should actually look: Not quite sure what to do. Here's the CSS styling being used: .button-panel .button { -web ...

htmlcssfirefox

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

cssangularangular-material

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

Hover animation using CSS is a great way to add interactivity

I'm trying to create an animation in a moving box that flips upside down when the mouse is raised. I've attempted to use keyframes and hover to achieve this effect, but it's not working as expected. Any suggestions on how to make it work? ...

htmlcss

Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...

jquerycsstabsshow-hide

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...

javascripthtmlcss

I'm having trouble getting Pycharm to locate my static files

My Pycharm is having trouble locating my CSS files. I've attached a screenshot showing the settings.py file, the directory where the .css file is located, and the error message from the terminal indicating a 404 error. Could someone please help me ide ...

pythoncsspycharm

Click event in jQuery to change the background color of <td> element

I'm still getting the hang of jQuery, so please bear with me. :) The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for a ...

jquerycsscolors

Using Angular to Bind Checkbox Value in Typescript

I have a challenge of creating a quiz where a card is displayed with 4 questions structured like this: <div class="col-md-6"> <div class="option" id="Answer1"> <label class="Answer1"> <input value= "Answer1" type="checkbox ...

htmlcssangulartypescriptundefined