Rounded corners just for the upper border (footer)


Author Message
Andrea

Posted: 7/14/2014
Quote message 

Hi,

I'd like to have my footer with the lower borders with the "rounded" corners and the upper ones "right-angled".

Is it possible? If so, how? (I'm pretty sure it's easy to do...but I'm not able to see it right now) ;-)

Thank you in advance!

http://it.tinypic.com/view.php?pic=21m7pu1&s=8
 
techtom

Posted: 7/14/2014
Quote message 

Andrea,

it depends how the footer is styled. If it is just using css then it is simple to add css to target individual corners and set the radius to 0px while leaving others set to where they are now.

google Rounded corner css or post a link and I can check the code for you.
 
Andrea

Posted: 7/14/2014
Quote message 

Quote techtom:

Andrea,
it depends how the footer is styled. If it is just using css then it is simple to add css to target individual corners and set the radius to 0px while leaving others set to where they are now.
google Rounded corner css or post a link and I can check the code for you.


Is there a way to do it setting my wordpress theme with artisteer or I just can set it after the export of my theme (working on the .css file)?

I think I should add/change something here...

.YJfooter
{
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border-top:1px dotted #7993AF;
padding:8px;
margin:10px auto 0;
position: relative;
color: #3F5369;
font-size: 13px;
font-family: Amaranth, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
line-height: 150%;
text-align: center;
}

...maybe something as

-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;

...if I googled right?

Thank you!

 
techtom

Posted: 7/14/2014
Quote message 

That looks right. Just add it at the bottom of your style.css file

.YJfooter
{
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
}

I don't think you will need to but if it does not seem to work try

-moz-border-radius-topleft: 0 !important;
-moz-border-radius-topright: 0 !important;
-webkit-border-top-left-radius: 0 !important;
-webkit-border-top-right-radius: 0 !important;
 
Andrea

Posted: 7/14/2014
Quote message 

Thank you again ;-)
 
Andrea

Posted: 7/20/2014
Quote message 

Finally I've add the opportunity to come back working on my theme so I tried this solution but... It doesn't work :(

I've fixed it adding the settings directly in the .YJfooter

-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;

:-)