| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <rml>
- <head>
- <title>Border-radius</title>
- <link type="text/rcss" href="../style.rcss"/>
- <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius" />
- <meta name="Description" content="Border-radius property" />
- <style>
- body {
- background: #ddd;
- color: #444;
- }
- div {
- margin: 20dp auto;
- width: 200dp;
- height: 120dp;
- background: #c3c3c3;
- border-color: #55f #f57 #55f #afa;
- }
- .thin {
- border-width: 10dp 5dp 25dp 20dp;
- border-radius: 80dp 30dp;
- decorator: horizontal-gradient( #ff8400 #ffd34f );
- }
- .thick {
- border-width: 40dp 20dp;
- border-radius: 30dp;
- }
- .arc {
- width: 80dp;
- height: 80dp;
- border-width: 40dp;
- border-color: #ff8400 #ff8400 #ffd34f #ffd34f;
- border-radius: 0 150dp;
- }
- .split {
- line-height: 2.5;
- }
- .split span {
- background: #c3c3c3;
- border-color: #55f #f57 #55f #afa;
- border-width: 5dp;
- border-radius: 8dp;
- padding: 8dp 0;
- }
- </style>
- </head>
- <body>
- <p>The following boxes should produce curved borders. There should be no overlapping triangles, and their backgrounds should not be visible outside their borders.</p>
- <div class="thin"/>
- <div class="thick"/>
- <div class="arc"/>
- <p class="split">The following text <span>should wrap down to the<br/> next line</span> and produce borders on each line.</p>
- </body>
- </rml>
|
