Hello,
I know you can make round cornors with css however has anyone done anything like this (please see attachment)?
Is this possible with css?
Thanks
Hello,
I know you can make round cornors with css however has anyone done anything like this (please see attachment)?
Is this possible with css?
Thanks
Hi, Welcome to Sitepoint
You can do it with border-radius for good browsers (IE9+).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
background:#cbe9ff;
border:2px solid #a1c1e7;
padding:10px;
width:300px;
-moz-border-radius:500px / 80px;
-webkit-border-radius:500px / 80px;
border-radius:500px / 80px;
}
p {
margin:0 0 1em;
}
</style>
</head>
<body>
<div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</html>
If you want older browser support then it will be the usual image background round corner techniques.
Thanks!