Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- border-radius in safari - am I going mad!


greencode - 5:31 pm on Dec 20, 2012 (gmt 0)


Am I going mad here!?

When you view the following code in Safari (Mac) the rounded corners sort of bleed off the right side. This only happens on the "square" div and not the "button" div.

Any ideas or help would be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title>
<style type="text/css">

.button {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #efefef;
border: 1px solid #c2c2c2;
padding: 20px;
}

.square {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 300px;
width: 300px;
background-color: #efefef;
border: 1px solid #c2c2c2;
}

</style>
</head>
<body>
<div class="square">Area</div>
<div class="button">Button</div>
</body>
</html>


Thread source:: http://www.webmasterworld.com/css/4529977.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com