Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

I'm exploring a concept where I want to create a curved border around the list items, both on the outside and inside. Here are some examples:

Right

Check out the correct curved border here

Wrong:

See the incorrect curved border here

Please note, it's not about the visual differences. What I'm aiming for is to curve the inner border using this HTML:

<ul>
  <li>Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li>Onderhoud</li>
 </ul>

CSS:

ul {
 list-style: none;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 width: 140px;
 border: 10px solid #BEBEBE;
}

ul li {
 height: 40px;
 width: 140px;
 background: #E5E5E5;
}
htmlcss

Answer №1

Sure thing, here's a successful solution that works well with links: http://www.jsfiddle.net/MDXZG/6/

HTML

<div class="roundbox">
    <h3>Dashboard</h3>
    <ul>
        <li><a href="http://google.com">Vehicles</a></li>
        <li>Customers</li>
        <li>Invoices</li>
        <li>Fines</li>
        <li>Maintenance</li>
    </ul>
</div>

CSS

To keep things concise, I've left out specific border radius details.

div.roundbox {
    border-radius: 15px;
    width: 120px;
    padding: 10px;
    background: #BEBEBE;
}

div.roundbox ul {
    list-style: none;
}

div.roundbox ul li {
    height: 40px;
    background: #E5E5E5;
}

div.roundbox ul li:last-child
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.roundbox h3
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    height: 40px;
    background-color: #00BEE5;
}

​

​

Answer №2

Alright, let's go through the resolution:

http://www.example.com/XYDAB/3/

To achieve this effect, you need to set the position as relative for the li elements and assign them a negative z-index value so they appear behind the border.

CSS Updates

ul {
    list-style: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 140px;
    position:relative;
    z-index:1;
    border: 10px solid #BEBEBE;
}

ul li {
    height: 40px;
    position:relative;
    z-index:0;
    background: #E5E5E5;
}​

HTML Structure

<ul>
    <li style="background-color: aqua;">Dashboard</li>
    <li>Vehicles</li>
    <li>Customers</li>
    <li>Invoices</li>
    <li>Penalties</li>
    <li>Maintenance</li>
</ul>​

Answer №3

Here is my approach:

<ul>
  <li class="first">Dashboard</li>
  <li>Vehicles</li>
  <li>Customers</li>
  <li>Invoices</li>
  <li>Fines</li>
  <li class="last">Maintenance</li>
</ul>

CSS Style:

ul {
 list-style: none;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 width: 140px;
 border: 10px solid #BEBEBE;
}

ul li {
 height: 40px;
 width: 140px;
 background: #E5E5E5;
}

li.first {
 -webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px; 
}

li.last {
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 12px;
 -webkit-border-bottom-left-radius: 12px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 12px;
 -moz-border-radius-bottomleft: 12px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 12px;
 border-bottom-left-radius: 12px;
}

Answer №4

This text was extracted directly from my website:

<div class='header'> 
        <ul><li><a href="/qrpsdrail/">Home</a></li><li><a href="/qrpsdrail/about">About</a></li></ul> 
        <ul class="right"> 
          <li> 
            <a href="/qrpsdrail/login">Login</a> 
          </li> 
          <li> 
            <a href="/qrpsdrail/signup" class="right">Register</a> 
          </li> 
        </ul> 
</div>

The corresponding CSS styles are as follows:

.header ul {
    float: left;
    list-style: none;
    margin: 0 0 0 140px;
}

.header ul.right {
    float:right;
}

.header li {
    float: left;
    font-size: 14px;
    margin: 0;
    padding: 0;
    height: 25px;
}

.header a.right {
    background: url('/button.jpg') #1463A3;
    display: block;
    float: left;
    margin: 0;
    padding: 10px 10px;
    text-decoration: none;
  -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
}

This setup includes a hover effect with this image link: hover image http://soggymilk.com/images/hover.png

Only the list items designated for the right edge have curved corners, while others remain squared.

To achieve this effect, it's necessary to assign a specific class to the items intended for the edge and apply the appropriate styling.

I hope this explanation guides you in the right direction towards finding your desired solution :-).

Answer №5

To achieve rounded borders on the top corners of the first list item and the bottom corners of the last list item, you can set a border radius using the pseudo-classes :first-child and :last-child. This method ensures that the styling will still apply even if the menu items are dynamically generated.

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

The Challenge with jQuery Nano Scroll

I recently added the jQuery Nano Scroll plugin to my HTML page. However, I am facing an issue where the scrollpane is not visible. When I inspect the div using Chrome, the scrollpane appears. Any suggestions on how to resolve this? Here's a snippet ...

jqueryhtml

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

Scrollbars in Jquery are not visible anymore when adjusting the size of a div element, causing them to expand

I'm facing an issue with a layout containing a div that expands to the screen size upon clicking a button. Initially, the div has enough content to necessitate scrolling. However, after collapsing back to its original size, the scroll bar disappears a ...

jqueryhtmlcss

Embed a style sheet in the PHP email sending function

Is there a way to integrate an entire stylesheet into an email using PHP's mail() function in order to maintain proper styling? I have a large CSS file designed specifically for CKEditor that needs to be included to ensure the email displays correctly ...

phpcssphpmailer

Caution: It is important for every child in a list to have a distinctive "key" prop value. How can a shared key be used for multiple items?

When I click on a header from my list, an image should appear. However, I'm encountering an error that needs to be resolved. I've been struggling to find a solution for adding unique keys to multiple elements in order to eliminate the error. Des ...

javascripthtmlreactjsjsx

Translate data from two "contact form 7" date fields into JavaScript/jQuery to display the date range between them

NEW UPDATE: I was able to get it working, but the code is a bit messy. If anyone can help me clean it up, I would greatly appreciate it. <div class="column one-fourth" id="date-start">[date* date-start date-format:dd/mm/yy min:today+1days placeholde ...

javascriptjquerywordpresshtmldate

What is the best method for creating a distinctive identifier in HTML and jQuery?

Coding in HTML: @foreach($permission->childs as $subMenu) <tr> <td>{{$subMenu -> id}}</td> <td> &nbsp; &nbsp;{{$subMenu -> display_name}}</td> <td ...

htmljquery

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

Can the animation be looped using setInterval()?

Once the images finish sliding in the animation, they continue to slide right endlessly. I've attempted using a setTimeout function to move the images back left and restart the animation, but this causes the setInterval animation to stop. Is there a w ...

javascriptjqueryhtmlcssanimation

Use XMLHttpRequest to load and display a PDF file within the web browser

Can XMLHttpRequest be used to send the filename by POST method and open a PDF in the browser? xmlhttp.open("POST","pdf.php",true); //CHANGE xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("file="+input); ...

phphtmlajaxpdfxmlhttprequest

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Necessary workaround needed for HTML time limit

Our HTML page has been designed to automatically timeout after 10 minutes of inactivity. This functionality is achieved through the following code: function CheckExpire() { $.ajax({ type:'GET', url:self.location.pathname+"?ch ...

javascripthtmlajax

What is the best way to retrieve a table from an HTML page and convert it into a data frame using XML and Rcurl in R programming?

Can someone help me convert a table on the Forbes website into a data.frame? Click here to access the table ...

htmlrxmlrcurl

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

My image display is working fine, but the other divs are appearing within the first div and the additional information like title and description are not showing. I'm aiming to have six rows, each with two columns, displaying a carousel of images and ...

phphtmlcarouselbootstrap-5

The collapsible list feature that includes the use of plus and minus signs is malfunctioning

Below is the script that I wrote to address this issue, but for some reason the + and - swapping is not functioning correctly. $('.showCheckbox').click(function(e) { var dynamicBox = $(this).attr('val'); var collapseSign = $(th ...

javascriptjqueryhtml

Use Jquery to select the checkbox inside the td element and mark it as

I've created an HTML table with checkboxes in the td elements, like so: <table id="my_table"> <tr> <td><input type="checkbox" name="td1"></td> <td><input type="checkbox" name="td2"></td> </ ...

javascriptjqueryhtmlcheckbox

Find the div element that wraps around the currently selected radio button

Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...

csscss-selectors

Assign a value to a jQuery variable from user input

Can someone assist me in setting an input field to the value of a jQuery variable? I am encountering difficulties with this task. My aim is to have equipment failure counts appear in an input textbox so that I can later write the value back to a table. Eac ...

htmljqueryvariables