Conceal the background hidden behind rounded corners with CSS

My current issue involves styling a dropdown menu item:

   /* Styling for the last dropdown menu item */
    .js .main-nav .menu li:last-child a {


        border-bottom: 2px solid;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow:hidden;

    }

The problem I am facing is that the portion outside the rounded corner appears in white (the same color as the background of the unordered list) instead of the desired grey color.

Although invisible to users, ensuring consistency with the background color is important for design principles.

htmlcss

Answer №1

Apply the same border-radius to the ul element as the last li.

body {
  background-color: grey;
}
ul {
  width: 50%;
  list-style: none;
  padding: 0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: -webkit-linear-gradient(top, brown, white);/* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top, brown, white);/* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top, brown, white);/* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, brown, white);/* Standard syntax */
}
li {
  width: 100%;
  border-left: 2px solid;
  border-right: 2px solid;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid;
  padding: 10px 0;
  font-weight: bold;
}
li:last-child {
  border-bottom: 2px solid;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

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

What methods can I use to prevent a user from accidentally double clicking a link within an email?

After users request a password reset, they are sent an email containing a link to create a password reset code. This link remains valid for 24 hours and can be utilized multiple times within that time frame to generate new codes in case the initial one is ...

htmlemailhyperlinkclickdouble

Arrange a group of users in the middle

Looking for some help with this specific code snippet .selection_user { display: block; background-color: #2D2C31; text-align: center; line-height: 75px; } <div class="select_user_menu"> <div class="selection_user">User1</div> ...

htmlcss

Restrictions on the height of Bootstrap 4 .card are determined by the height of the parent when

I am trying to create a card deck that contains multiple cards displayed side by side, even on mobile devices, with both horizontal and vertical scrolling capabilities. The parent container of the cards has a fixed height, however, I am struggling to adju ...

htmlcssbootstrap-4

The unboundStoryFn function returned nothing from the render, indicating that a return statement is likely missing. To render nothing, simply return null

While trying to test a react search component using storybook, I encountered an error called unboundStoryFn. The error message indicates that unboundStoryFn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to re ...

javascripthtmlreactjsstorybook

Purchased a website design - should I go with a table structure or CSS layout?

Recently, I decided to hire a new web designer for one of my projects. After multiple attempts, he finally delivered a beautifully designed webpage by sending me 20 poorly sliced images from Photoshop and an entire HTML file with table structure. When I r ...

htmlcsslayout

Creating a CSS class in a separate file for an element in Angular 4

Looking for some help with my code setup. Here's what I have: <div class="over"> Content </div> In my component file, this is what it looks like: @Component({ selector: 'app', templateUrl: './app.componen ...

cssangular

Get rid of or substitute any unnecessary information at the beginning of the `class` name

I am receiving style information from the backend, but it includes an unwanted prefix. I need to remove this prefix and keep only the necessary styling. Can you suggest the correct approach? This is the current style code I am obtaining: <style> 04 ...

jquerycssregex

Securing PHP Code with HTML Encoding

I'm having trouble parsing an HTML page due to encoding issues. Despite trying popular solutions like using utf8_encode() and utf8_decode(), my results remain unchanged. Below is a snippet of my code along with the output. Code $str_html = $this-> ...

phphtmlcharacter-encoding

Difficulty in displaying errors for specific spans

Upon receiving the json data from another page, it typically resembles: data : {"BusNo":["The bus no field is required."],"CompID":["The comp id field is required."],"TotalSeats":["The total seats field is required."]} Below is my Script : $(document). ...

javascriptjqueryhtmlcssjson

Interested in creating a scroll bar that displays corresponding values?

How can I create a design similar to this without using click functionality? Does anyone know of any resources or links where I can find examples of implementing this in Javascript? Specifically, I am trying to add a scroll bar with associated values, but ...

javascriptjqueryhtml

validating API keys in Django

What is the process for verifying API keys in Django? I am currently using RapidAPI and they provide a key, but how can I authorize it with the URL? views.py def thanks(request): url = "https://webknox-trivia-knowledge-facts-v1.p.rapidapi.com/trivia/r ...

pythonhtmldjangoapi

Text that disappears upon clicking on show/hide按钮

Could someone please help me figure out how to prevent the "See more" text from disappearing when clicked in the example below? I want it to stay visible. Thank you! ...

javascripthtmlcss

Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning. <section> <h2 style= ...

htmlcssimagebootstrap-4

Place the text in the middle of a div element

I have a div that is typically sized to be 200px x 40px. Depending on the content, it may contain either one or two lines of text. When there are two lines, I adjust the line height to maintain balance within the div. However, when there is only one line o ...

htmlcsslayout

Is it achievable to create an inline block+text layout in React Native?

In my React Native project, I am aiming to replicate a layout that I successfully implemented in HTML+CSS on the web: https://i.sstatic.net/vpbER.png The challenging part is getting the gray breadcrumb element to align horizontally with the description. ...

htmlcssiosreact-nativelayout

Using a parameter as a value within a JavaScript inline function

I am facing a challenge where I want my page slides to scroll when a link is clicked using Javascript/jQuery. However, I am struggling with passing the current increment value of my 'for' loop as a parameter in order to bind click events on the l ...

javascriptjqueryhtml

Issues with Floating Menus

I attempt to outline my issue using visuals. *This is what I desire *However, this is what I am currently receiving: HTML <div class="header"> <ul class="menu"> <li>Home</li> <li>Content</li> ...

htmlcsscss-float

Enhancing jQuery UI Tabs with HoverIntent

I'm currently working on incorporating HoverIntent into my jQuery tabs, but I seem to be facing some issues. Below is the code snippet that I've been using. Any suggestions or tips would be greatly appreciated. Thank you! The code was sourced di ...

jqueryhtmljquery-uihoverintent

A space designated for numerous receivers

Is there a way to create a field that contains other elements, similar to sending messages to multiple users in a social network? https://i.stack.imgur.com/P9e24.png I attempted to understand the code for this, but it's quite complex. If anyone could ...

javascriptjqueryhtmlcss

Some font-awesome icons are not appearing on the screen

As a beginner in web design, I am experimenting with using font awesome icons in Angular 9 projects within list items. While some of the icons are displaying properly, others are not. You can see the issue in the attached image. To access the icons, I have ...

htmlcssangularfont-awesome