Jump to content

Problem with Border-Radius


cousineaug

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...