Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS need only lower radius?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #155591
    ajmaly
    Participant

    Hi,
    below code does round curve in upper/lower both part of div, but I ONLY want lower curve,

    .roundCorner
    {
    width: 170px;
    height: 20px;
    padding: 2em;
    border: 1px solid;
    border-radius: 13em/3em;
    }

    I tried below, “border-bottom-radius”, but NOT works,

    border-bottom-radius: 13em/3em;

    #155593
    David_Leitch
    Participant

    Like border-width, you can target the different corners, like so:

    border-radius: 0 0 10px 10px;

    where the corners are as so:

    border-radius: [top-left] [top-right] [bottom-left] [bottom-right];

    You can still use the width/height units like you want, like:

    border-radius: 0 0 10px 10px / 0 0 30px 30px

    Shown here

    Lea Verou had a interesting presentation on border–radius that you might want to check out.

    #155615
    ajmaly
    Participant

    thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.