Jump to content

Problem with Border-Radius


cousineaug
 Share

Recommended Posts

My website has a liquid main body. There is a menu bar at the top of the main body in which I have used roudned corners. So far it works in latest browsers except Firefox...I can live with that.My problem is that in Safari and Chrome, the right side of an element becomes flat when its neighbour wraps to the next line.Here are the 2 elements that make up forgeround and background of the menu

p.bg	{	background:	#662;	margin-left:	-10px;  /*needed to touch the left side of the container*/	}.bg a	{	font-family:	'segoe print', 'bernhardmod bt bold', papyrus,   cursive;	color:		#030;	font-size:	14px;	background:	#d8d8af;	text-decoration:	none; 	line-height:	27px;	border-top-left-radius:	20px 12px;	border-bottom-left-radius: 20px 12px;	border-top-right-radius:	20px 12px;	border-bottom-right-radius: 20px 12px;	}

have a look at the siteresize Chrome or Safari until the HOME button wraps to the next line. Then see that the right side of the BLOG button has gone flat.Other than just quirky border radius implementation, does anyone know why this is happening?...Guy

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...