Not every menu item will have radius corners applied to its end

Question

Not every menu item will have radius corners applied to its end

Here is my customized menu -

<div ><ul id="menu">
        <li class="one"><a href="http://www.domain.com">Home</a></li>
        <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
        <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Inbox</a></li>
        <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
        <li><?php bp_adminbar_notifications_menu() ?>
        <ul>
        <li> </li>
        </ul>
        </li>
    </ul>

Custom CSS for the menu items -

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
    background-color: #F8FCFE;
    position: relative;
    z-index: 1;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;

}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #F8FCFE;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
}

My goal is to have the first item with top left and bottom left radius, and the last item with top right and bottom right radius. This will create a vertical rectangle shape with rounded corners.

html css menu

Answer 1

Answer №1

Designate the first li with a class of first, and the last one with a class of last. The first should have rounded borders on the top-left and bottom-left corners, while the last should have rounded borders on the top-right and bottom-right corners.

li.first {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; }

li.last {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }

Here is an example menu:

<ul id="menu">
<li class="one first"><a href="http://www.domain.com">Dashboard</a></li>
<li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
<li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
<li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
<li class="last"><?php bp_adminbar_notifications_menu() ?></li>
</ul>

Answer 2

Designate the first li with a class of first, and the last one with a class of last. The first should have rounded borders on the top-left and bottom-left corners, while the last should have rounded borders on the top-right and bottom-right corners.

li.first {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; }

li.last {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }

Here is an example menu:

<ul id="menu">
<li class="one first"><a href="http://www.domain.com">Dashboard</a></li>
<li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
<li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
<li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
<li class="last"><?php bp_adminbar_notifications_menu() ?></li>
</ul>

Answer 3

Answer №2

How about trying this example on jsFiddle?

I kept your HTML as is but made some changes to the CSS:

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
}

li.one a{
    border:2px solid #999;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
    border-right:none;
}
li.two a, li.three a {
    border-top:2px solid #999;
    border-bottom:2px solid #999;
}
li.four a{
    border:2px solid #999;
    border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-left:none;
}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #ccc;

}

Answer 4

How about trying this example on jsFiddle?

I kept your HTML as is but made some changes to the CSS:

ul#menu li {
    list-style: none;
    float: left;
    margin: 0 0px 0 0;
}

li.one a{
    border:2px solid #999;
    border-top-left-radius: 10px 10px;
    border-bottom-left-radius: 10px 10px;
    border-right:none;
}
li.two a, li.three a {
    border-top:2px solid #999;
    border-bottom:2px solid #999;
}
li.four a{
    border:2px solid #999;
    border-top-right-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    border-left:none;
}

ul#menu li a:link, ul#menu li a:visited {
    display: block;
    text-align: center;
    width: 88px;
    height: 53px;
    line-height: 53px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #ccc;

}

Answer 5

Answer №3

html:

<ul id="menu">
    <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
    <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
    <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
    <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
    <li class="five"><?php bp_adminbar_notifications_menu() ?>
    <ul>
    <li> </li>
    </ul>
    </li>
</ul>

css:

ul#menu li {
list-style: none;
float: left;
margin: 0 0px 0 0;
background-color: #F8FCFE;
position: relative;
z-index: 1;
border-top-left-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
overflow:hidden;}

ul#menu li.one {border-radius: 10px 0px 0px 10px;}

ul#menu li.five {border-radius: 0px 10px 10px 0px;}

you can designate the corners for each item in a clockwise manner like this : top left, top right, bottom right, bottom left.

adjusted for easy copying and pasting directly into css file.

Answer 6

html:

<ul id="menu">
    <li class="one"><a href="http://www.domain.com">Dashboard</a></li>
    <li class="two"><a href="<?php echo bp_loggedin_user_domain() ?>">Profile</a></li>
    <li class="three"><a href="<?php echo bp_loggedin_user_domain() ?>messages">Messages</a></li>
    <li class="four"><a href="<?php echo bp_loggedin_user_domain() ?>friends">Friends</a></li>
    <li class="five"><?php bp_adminbar_notifications_menu() ?>
    <ul>
    <li> </li>
    </ul>
    </li>
</ul>

css:

ul#menu li {
list-style: none;
float: left;
margin: 0 0px 0 0;
background-color: #F8FCFE;
position: relative;
z-index: 1;
border-top-left-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
overflow:hidden;}

ul#menu li.one {border-radius: 10px 0px 0px 10px;}

ul#menu li.five {border-radius: 0px 10px 10px 0px;}

you can designate the corners for each item in a clockwise manner like this : top left, top right, bottom right, bottom left.

adjusted for easy copying and pasting directly into css file.

Answer 7

Answer №4

Cascading Style Sheets, known as CSS3, provides the ability to customize the style of individual child elements within a parent container. For example:

#gallery img:last-child {
 // define some specific styling here
}

#gallery img:first-child {
 // set a different style for this element
}

I trust that this information proves useful.

Answer 8

Cascading Style Sheets, known as CSS3, provides the ability to customize the style of individual child elements within a parent container. For example:

#gallery img:last-child {
 // define some specific styling here
}

#gallery img:first-child {
 // set a different style for this element
}

I trust that this information proves useful.

Not every menu item will have radius corners applied to its end

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Manipulating div position interactively with vanilla javascript during scroll

CSS - sticky header causing issues when resizing the browser window

The issue arises when radio buttons allow for multiple selections and labels cannot be displayed in a single row

How can I create a grid layout in Bootstrap using columns of sizes 1.5, 8.5, and 2?

Reiterating the text and determining the length of the string

What is the best way to show a check mark when selecting a checkbox?

Unable to create a universal <header> and <footer> to be displayed across all pages

When positioning 2 divs on top of each other, rotating one by 180 degrees causes it to be considered secondary in the visibility hierarchy. What is the reason behind this?

Adding Bootstrap to a button is a simple process that can enhance the

Diagonal-left ending div in cascading style sheets

Division of two "div" sections

Ways to retrieve attribute value in Selenium python without the use of .get_attribute() method

Items vanish when hovering over them

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

iOS devices experiencing issues with fixed positioning

Gradient background overlaid with a blended SVG shape

What can I do to prevent Masonry from floating all of my grid items to the left?

Curved edges achieved without the need for relative positioning

Enhancing User Experience with Interactive React Hover Effects