Rounded Corners without images and withount JS. CSS Solution


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



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.