Question

I’m Trying to create a table with a rounded border, but only in the bottom. I’m using this CSS coder:

#table_rounded_white{
            border-style: solid; 
            /*border-top-style: none;*/
            border-width: 1px;
            border-color: #8E8C8C;
            border-radius: 15px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            background-color: #FFFFFF;
            padding: 10px;
        }

What I need is to do the top borders without rounding them.

Someone have an idea about how to do this?

Thank You

Answer 1

rather than defining all radii for each corner:

border-radius: 15px;
-moz-border-radius: 15px;

only define the radii you need:

-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

here’s a handy-dandy tool to generate styles quickly: http://border-radius.com/