layer at (0,0) size 800x671
  RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x671
  RenderBlock {HTML} at (0,0) size 800x671 [bgcolor=#C0C0C0]
    RenderBody {BODY} at (86,0) size 628x671 [bgcolor=#FFFFFF] [border: (1px solid #000000) none (1px solid #000000)]
      RenderBlock {H1} at (14,13) size 600x20
        RenderText {TEXT} at (0,0) size 196x20
          text run at (0,0) width 196: "Rounded corners in CSS"
      RenderBlock {P} at (14,46) size 600x57
        RenderText {TEXT} at (0,2) size 593x57
          text run at (0,2) width 593: "Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner"
          text run at (0,21) width 584: "techniques is that they require alteration of the HTML document itself, which means that retrofitting it"
          text run at (0,40) width 288: "onto an existing design may require a lot of effort."
      RenderBlock {P} at (14,116) size 600x38
        RenderText {TEXT} at (0,2) size 577x38
          text run at (0,2) width 577: "However, there is a solution that will allow you to retrofit this to existing designs without altering any"
          text run at (0,21) width 51: "markup. "
          text run at (51,21) width 216: "Take a look at the following example."
      RenderBlock {BLOCKQUOTE} at (27,167) size 574x181 [color=#FFFFFF] [bgcolor=#666666]
        RenderBlock (anonymous) at (0,0) size 574x30
          RenderImage at (0,0) size 30x30
        RenderBlock {P} at (0,43) size 574x76
          RenderText {TEXT} at (16,2) size 530x76
            text run at (16,2) width 517: "The first images, from ten thousand kilometers away, brought to a halt the activities of all"
            text run at (16,21) width 57: "mankind. "
            text run at (73,21) width 473: "On a billion television screens, there appeared a tiny featureless cylinder, growing"
            text run at (16,40) width 511: "rapidly second by second. By the time it had doubled it\x{2019}s size, no one could pretend any"
            text run at (16,59) width 223: "longer that Rama was a natural object."
        RenderBlock {P} at (0,131) size 574x19 [color=#EEEEEE]
          RenderText {TEXT} at (275,2) size 283x19
            text run at (275,2) width 283: "\x{2014} Arthur C. Clarke, \x{201C}Rendezvous with Rama\x{201D}"
        RenderBlock (anonymous) at (0,151) size 574x30
          RenderImage at (0,0) size 30x30
      RenderBlock {H2} at (14,364) size 600x18
        RenderText {TEXT} at (0,0) size 141x18
          text run at (0,0) width 141: "Generated content"
      RenderBlock {P} at (14,395) size 600x38
        RenderText {TEXT} at (0,2) size 377x19
          text run at (0,2) width 377: "In order to create the markup, we use the CSS pseudo elements "
        RenderInline {A} at (0,0) size 99x15 [color=#0000EE]
          RenderText {TEXT} at (377,2) size 99x19
            text run at (377,2) width 99: ":before and :after"
        RenderText {TEXT} at (476,2) size 118x19
          text run at (476,2) width 118: ", the CSS properties"
        RenderInline {A} at (0,0) size 43x15 [color=#0000EE]
          RenderText {TEXT} at (0,21) size 43x19
            text run at (0,21) width 43: "content"
        RenderText {TEXT} at (43,21) size 29x19
          text run at (43,21) width 29: " and "
        RenderInline {A} at (0,0) size 67x15 [color=#0000EE]
          RenderText {TEXT} at (72,21) size 67x19
            text run at (72,21) width 67: "background"
        RenderText {TEXT} at (139,21) size 4x19
          text run at (139,21) width 4: "."
      RenderBlock {H2} at (14,449) size 600x18
        RenderText {TEXT} at (0,0) size 88x18
          text run at (0,0) width 88: "The images"
      RenderBlock {P} at (14,480) size 600x19
        RenderText {TEXT} at (0,2) size 314x19
          text run at (0,2) width 314: "For this demonstration, the following images are used:"
      RenderBlock {P} at (14,512) size 600x63
        RenderImage {IMG} at (13,13) size 32x32 [bgcolor=#A0A0A0] [border: (1px solid #000000)]
        RenderText {TEXT} at (58,46) size 4x19
          text run at (58,46) width 4: " "
        RenderImage {IMG} at (75,13) size 32x32 [bgcolor=#A0A0A0] [border: (1px solid #000000)]
        RenderText {TEXT} at (120,46) size 4x19
          text run at (120,46) width 4: " "
        RenderImage {IMG} at (137,13) size 32x32 [bgcolor=#A0A0A0] [border: (1px solid #000000)]
        RenderText {TEXT} at (182,46) size 4x19
          text run at (182,46) width 4: " "
        RenderImage {IMG} at (199,13) size 32x32 [bgcolor=#A0A0A0] [border: (1px solid #000000)]
      RenderBlock {P} at (14,588) size 600x57
        RenderText {TEXT} at (0,2) size 586x57
          text run at (0,2) width 578: "These images are true-color PNG images with an Alpha channel, so the corners will appear smooth,"
          text run at (0,21) width 441: "and the \x{201C}inner\x{201D} part of each corner is transparent, while the edges are white. "
          text run at (441,21) width 145: "This allows us to use the"
          text run at (0,40) width 233: "corners on rounded boxes of any colour."