WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Round corner

View previous topic View next topic Go down  Message [Page 1 of 1]

1Round corner Empty Round corner Fri Nov 05, 2010 6:32 pm

Behavior???


Registered Member
Registered Member
How can I use CSS to round the corners of my nav bar?

My site is http://www.thediscussion.info/

http://www.thedungeons.info

2Round corner Empty Re: Round corner Fri Nov 05, 2010 7:59 pm

Emilio

Emilio
Registered Member
Registered Member
Add this to your Navigation css ,
Code:
border-radius: 15px;
}

http://www.graphilicious.forumotion.Com

3Round corner Empty Re: Round corner Fri Nov 05, 2010 9:10 pm

Behavior???


Registered Member
Registered Member
No, it doesnt work!

Here is my code

Code:
#menu_corner {
  float: left;
  display: block;
  width: 20px;
  height: 30px;
  background: url("{T_THEME_PATH}/images/menu/menu_corner.gif") no-repeat;
  border-radius: 15px;
}

#menu_corner_right {
  float: right;
  display: block;
  width: 10px;
  height: 30px;
  background: url("{T_THEME_PATH}/images/menu/menu_corner_right.gif") no-repeat;
  border-radius: 15px;
}

http://www.thedungeons.info

4Round corner Empty Re: Round corner Fri Nov 05, 2010 9:17 pm

YanOri

YanOri
Registered Member
Registered Member
try adding

Code:

-moz-border-radius : 10px;
-webkit-border-radius : 10px;

inside

Code:
#menu_corner { }

5Round corner Empty Re: Round corner Fri Nov 05, 2010 9:39 pm

Behavior???


Registered Member
Registered Member
Nah, it didnt help either

http://www.thedungeons.info

6Round corner Empty Re: Round corner Sat Nov 06, 2010 12:09 am

YanOri

YanOri
Registered Member
Registered Member
oh, i meant
Code:
#menu_corner_right {
  float: right;
  display: block;
  width: 10px;
  height: 30px;
  background: url("{T_THEME_PATH}/images/menu/menu_corner_right.gif") no-repeat;
  -moz-border-radius : 10px;
-webkit-border-radius : 10px;}


I assume you "cleared" your browser's cache

7Round corner Empty Re: Round corner Mon Nov 08, 2010 1:22 pm

ankillien

ankillien
Administrator
Administrator
Border radius won't do the trick, I think.

Your forum nav bar uses these images...
http://www.thediscussion.info/styles/se_pro/theme/images/menu/menu_corner_right.gif
http://www.thediscussion.info/styles/se_pro/theme/images/menu/menu_corner.gif

Make them fully rounded in image editor and reupload.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Round corner

Permissions in this forum:
You cannot reply to topics in this forum