Rounded corners effect not showing up
Question
I was trying to give a rounded corners effect to the buttons on my ASP.NET website using CSS by using the CSS and .js script from here.
http://www.monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors
I just need to reference the buttons with the class. For eg:
<head>
<link rel="stylesheet" type="text/css" href="css/btns.css" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/ie6.css" media="screen" title="ie6" />
<script type="text/javascript" src="switch.js"></script>
</head>
-----Body---
<a href="" class="btn green">Test </a>
But the above is not giving me the rounded corners effect through it is applying the green color property and the hover color from the CSS but the main thing I wanted was the corners effect. What I am missing here?
4 answers
solution1
1 ACCPTED 2011-01-25 04:22:13
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
That should work in most browsers.
solution2
1 2011-01-25 04:23:29
It's CSS3 time. Try this: CSS Rounded Corners In All Browsers (With No Images)
solution3
0 2011-01-25 04:25:07
Make sure you have used/copied the image http://www.monc.se/kitchen/stew/buttons/btn2.png also. This image is what gives the round corner effect.
solution4
0 2011-01-25 04:27:00
Note that not all browsers support rounded corners as they are relatively new. As Sam points out, some browsers have been using non-standard rounded-corner terms until the behavior of border-radius has been fully standardized.
This is still a new technique and it will be a while before all users will be using browsers that support it.
What browser are you using?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.