CODEWITHSUNDEEP
csshover
Syphlect
Syphlect

Reputation: 11

I can't get my border-radius hover effect to appear wider

I'm trying to apply a border-radius hover effect to navigation links, but I can't seem to get it bigger than this (https://i.sstatic.net/COZ5z.jpg). Here's a snippet of my code:

CSS:

.nav a:hover {
    background: #091D6C;
    color: #fff;
    border-radius: 1em;
}

HTML:

<ul class="nav">

   <li class="home"><a href="#">Home</a></li>

</ul>

If anybody could help, that'd be awesome. This is for my school project that's due this week. Thanks!

Here's the CSS of my navigation:

.globalheader .navigation li {
    display: table;
    width: 100%;
    font-weight: 600;
}

.globalheader .navigation .nav {
    display: table;
    table-layout: fixed;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 1.2em;
    padding-right: 1.2em;
    height: 5.8em;
    overflow: hidden;
}

.navigation {
    position: relative;
    min-height: 4.8em;
    margin-bottom: 2.4em;
    border: .1em solid transparent;
}

Sorry for not being more clearer with my question and thank you for the quick replies!

Upvotes: 1

Views: 121

Answers (1)

XanderDwyl
XanderDwyl

Reputation: 69

border-radius has four values, for each radii are given in the order

  1. top-left
  2. top-right
  3. bottom-right
  4. bottom-left

If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

It shortens the border of your text, so in order to make it bigger you can add padding value. I go with @showdev.

example

.nav a:hover {
    background: #091D6C;
    color: #fff;
    border-radius: 1em;
    padding: 16px; // or 1em;
}

you can also refer to w3school about border-radius -- http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Upvotes: 1

Related Questions