advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

DeadLy on 01/21/08


Tagged

corners ROUNDED


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

mbcdg
ctronci
paullorentzen
basicmagic


Rounded Corners without images and withount JS. CSS Solution

Published in: CSS 

URL: http://dimox.name/smooth_rounded_corners_no_images/

Plain TextExpand 
  1. <style>
  2. * {margin: 0; padding: 0}
  3. body {
  4.   font: 14px/17px "Trebuchet MS", tahoma, arial;
  5. 	text-align: justify;
  6. }
  7. a {color: #0094D6}
  8. p {
  9. 	text-align: center;
  10. 	margin-top: 30px;
  11. 	font-weight: bold;
  12. 	font-size: 13px;
  13. }
  14. #v3 {
  15.   width: 500px;
  16. 	margin: 30px auto 15px;
  17. }
  18. h1 {
  19. 	font-size: 20px;
  20. 	font-weight: normal;
  21. 	text-align: center;
  22. 	padding: 9px 0 14px;
  23. }
  24.  
  25. #v3 h1 {color: #00AA00;}
  26. .text {
  27. 	border: 1px solid #B0BCC2;
  28. 	border-width: 0 1px;
  29. 	padding: 5px 10px;
  30. }
  31.  
  32. .b1, .b2, .b3, .b4, .b5,
  33. .b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
  34. .b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
  35. .b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
  36. 	height: 1px;
  37. 	font-size: 1px;
  38. 	overflow: hidden;
  39. 	border-style: solid;
  40. 	border-width: 0 1px;
  41. 	display: block;
  42. }
  43. .b1 {
  44.   margin: 0 2px;
  45. 	background: #EBEEF0;
  46. 	border: none;
  47. }
  48. .b1 b {
  49.  margin: 0 1px;
  50.  background: #B8C3C8;
  51.  border-color: #CBD3D7;
  52. }
  53. .b2 {margin: 0 1px;	border-color: #D6DCDF;}
  54. .b2 b {border-color: #B8C3C8;}
  55. .b2 i {border-color: #E4E8EA;}
  56. .b2 q {border-color: #F7F8F9;}
  57. .b3 {border-color: #EBEEEF;}
  58. .b3 b {border-color: #BCC6CB;}
  59. .b3 i {border-color: #F9FAFB;}
  60. .b4 {border-color: #CAD2D6;}
  61. .b4 b {border-color: #E5E9EB;}
  62. .b5 {border-color: #B5C0C6;}
  63. .b5 b {border-color: #FAFBFB;}
  64.  
  65. </style>
  66.  
  67. <div id="v3">
  68. <div class="b1"><b></b></div><div class="b2"><b><i><q></q></i></b></div>
  69. <div class="b3"><b><i></i></b></div><div class="b4"><b></b></div><div class="b5"><b></b></div>
  70.   <div class="text">
  71. <h1>3. Сглаженное закругление углов с помощью CSS</h1>
  72. Этот способ визуально абсолютно идентичен первому варианту. Но, в отличие от него, не использует ни одного графического изображения. В этом варианте каждый пиксель угла прорисовывается с помощью CSS. В результате угол выглядит сглаженным.
  73.   </div>
  74. <div class="b5"><b></b></div><div class="b4"><b></b></div><div class="b3"><b><i></i></b></div>
  75. <div class="b2"><b><i><q></q></i></b></div><div class="b1"><b></b></div>
  76. </div>

Report this snippet 

You need to login to post a comment.