Advanced Search

Rounded Corners without images and withount JS. CSS Solution

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.