mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
94491ead67
When joined border width is zero width, then the midpoint of the joined corner is no longer need to be computed anymore. Just set the mid point to be the endpoint of the corner.
471 lines
13 KiB
HTML
471 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<style>
|
|
.box {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.box-1 {
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-1 {
|
|
border: 1px solid black;
|
|
border-radius: 5px 10px 15px 20px;
|
|
}
|
|
|
|
.box-1-5 {
|
|
border: 1px solid black;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-1-6 {
|
|
border: 1px solid black;
|
|
border-top-width: 1px;
|
|
border-right-width: 5px;
|
|
border-bottom-width: 10px;
|
|
border-left-width: 12px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-2 {
|
|
border: 1px solid black;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.box-1-7 {
|
|
border: 5px solid black;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.box-1-8 {
|
|
border: 20px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-9 {
|
|
border: 20px inset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-10 {
|
|
border: 20px outset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-11 {
|
|
border-top: 20px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-12 {
|
|
border-radius: 20px;
|
|
border-top: 5px solid red;
|
|
border-right: 10px solid yellow;
|
|
border-bottom: 15px solid lime;
|
|
border-left: 20px solid blue;
|
|
}
|
|
|
|
.box-1-13 {
|
|
border-radius: 15px;
|
|
border-color: black;
|
|
border: 3px solid black;
|
|
border-top-width: 0;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.box-1-14 {
|
|
border-radius: 15px;
|
|
border-color: black;
|
|
border: 3px solid black;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.box-3 {
|
|
border: 1px solid black;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.box-4 {
|
|
border: 1px solid black;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.box-5 {
|
|
border: 1px solid black;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.box-6 {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
border-radius: 75px;
|
|
}
|
|
|
|
.box-7 {
|
|
background-color: magenta;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-7-1 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: magenta;
|
|
border-radius: 25px 50px 75px 100px;
|
|
}
|
|
|
|
.box-7-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: magenta;
|
|
border-radius: 100px 75px 50px 25px;
|
|
}
|
|
|
|
.box-8 {
|
|
background-color: magenta;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-9 {
|
|
background-color: magenta;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.box-10 {
|
|
background-color: magenta;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.box-11 {
|
|
background-color: magenta;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.box-12 {
|
|
background-color: magenta;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.box-13 {
|
|
background-color: magenta;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.box-14 {
|
|
background-color: lime;
|
|
border: 1px solid black;
|
|
border-radius: 500px;
|
|
}
|
|
|
|
.box-15 {
|
|
background-color: red;
|
|
border: 1px solid black;
|
|
border-radius: 500px;
|
|
}
|
|
|
|
.rect {
|
|
width: 300px;
|
|
height: 100px;
|
|
background-color: red;
|
|
}
|
|
|
|
.rect-1 {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.rect-2 {
|
|
border-radius: 50% 20% / 10% 40%;
|
|
width: 280px;
|
|
height: 215px;
|
|
background-color: #5b6dcd;
|
|
}
|
|
|
|
.rect-3 {
|
|
border-top-left-radius: 50%;
|
|
}
|
|
|
|
.rect-4 {
|
|
border-top-right-radius: 50%;
|
|
}
|
|
|
|
.rect-5 {
|
|
border-bottom-left-radius: 50%;
|
|
}
|
|
|
|
.rect-6 {
|
|
border-bottom-right-radius: 50%;
|
|
}
|
|
|
|
.rect-7 {
|
|
border-radius: 10px 100px / 120px;
|
|
width: 200px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nut {
|
|
width: 220px;
|
|
height: 180px;
|
|
background-size: 220px 180px;
|
|
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
|
|
background-image: url('old-computer.png');
|
|
}
|
|
|
|
.screenshot {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background-image: url("serenity-screenshot.png");
|
|
}
|
|
|
|
.rounded-image {
|
|
background-image: url("90s-bg.png");
|
|
background-repeat: repeat;
|
|
border-radius: 20px;
|
|
width: 150px;
|
|
height: 100px;
|
|
}
|
|
|
|
.solid-color {
|
|
background: red content-box;
|
|
}
|
|
|
|
.image {
|
|
background: center / contain url(car.png) content-box;
|
|
}
|
|
|
|
.image-layers {
|
|
background: center / contain url(car.png) content-box, center / contain url(old-computer.png);
|
|
}
|
|
|
|
.box-background-clip {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 10px solid black;
|
|
border-radius: 50px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.positioned {
|
|
background-color: red;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h3>Border-radius</h3>
|
|
<p>The boxes are 50x50px and have a background-color</p>
|
|
<em>All round 10px</em>
|
|
<div class="box box-7"></div>
|
|
<br>
|
|
<em>All round 25,50,75,100px</em>
|
|
<div class="box box-7-1"></div>
|
|
<br>
|
|
<em>All round 100,75,50,25px</em>
|
|
<div class="box box-7-2"></div>
|
|
<br>
|
|
<em>All round 20px</em>
|
|
<div class="box box-8"></div>
|
|
<br>
|
|
<em>All round 15px 5px thick</em>
|
|
<div class="box box-9"></div>
|
|
<br>
|
|
<em>top-left 10px</em>
|
|
<div class="box box-10"></div>
|
|
<br>
|
|
<em>top-right 10px</em>
|
|
<div class="box box-11"></div>
|
|
<br>
|
|
<em>bottom-right 10px</em>
|
|
<div class="box box-12"></div>
|
|
<br>
|
|
<em>bottom-left 10px</em>
|
|
<div class="box box-13"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>These boxes have elliptical borders</p>
|
|
<em>All round 50%</em>
|
|
<div class="rect rect-1"></div>
|
|
<br>
|
|
<em>All round -- MDN example</em>
|
|
<div class="rect rect-2"></div>
|
|
<br>
|
|
<em>top-left 50%</em>
|
|
<div class="rect rect-3"></div>
|
|
<br>
|
|
<em>top-right 50%</em>
|
|
<div class="rect rect-4"></div>
|
|
<br>
|
|
<em>bottom-left 50%</em>
|
|
<div class="rect rect-5"></div>
|
|
<br>
|
|
<em>bottom-right 50%</em>
|
|
<div class="rect rect-6"></div>
|
|
<br>
|
|
<em>All round -- MDN example 2 -- outline</em>
|
|
<div class="rect rect-7"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>These boxes have (rectangular) background images, that are clipped by the border radius</p>
|
|
<em>In a nutshell</em>
|
|
<div class="nut"></div>
|
|
<br>
|
|
<em>In a circle</em>
|
|
<div class="screenshot"></div>
|
|
<br>
|
|
<em>Rounded</em>
|
|
<div class="rounded-image"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>This is an <code><img></code> tag with a border radius</p>
|
|
<img src="old-computer.png" style="border-radius: 20px; width: 200px">
|
|
<br>
|
|
<br>
|
|
|
|
<p>These use a border-radius + a background clip (the radius of the inner background should shrink)</p>
|
|
<em>Solid color</em>
|
|
<div class="box-background-clip solid-color"></div>
|
|
<br>
|
|
<em>Background image</em>
|
|
<div class="box-background-clip image"></div>
|
|
<br>
|
|
<em>Background image layers</em>
|
|
<div class="box-background-clip image-layers"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>The all have a border-radius +/- overflow: hidden, which clips their child elements<p>
|
|
<em>Lorem ipsum, <b>without</b> overflow: hidden</em>
|
|
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown">
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
|
|
</div>
|
|
<br>
|
|
<em>Lorem ipsum, <b>with</b> overflow: hidden</em>
|
|
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown; overflow: hidden;">
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
|
|
</div>
|
|
<br>
|
|
<em>An image inside a inline-block <code><a></code> tag, with a border-radius of 50% and overflow: hidden</em>
|
|
<br>
|
|
(this is commonly used for avatars and occurs GitHub a few times)
|
|
<br>
|
|
<a style="display: inline-block; border-radius: 50%; overflow: hidden; width: 100px; height: 100px;">
|
|
<img src="car.png" style="width: 100px; height: 100px">
|
|
</a>
|
|
<br>
|
|
<em>A red div with position: relative within a parent with overflow: hidden + a border-radius</em><br>
|
|
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
|
<div class="box positioned"></div>
|
|
</div>
|
|
<br>
|
|
<em>A blue (background) div within a parent with overflow: hidden + a border-radius</em><br>
|
|
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
|
<div class="box" style="background-color: blue;"></div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>All these are non-conventional elements with a border-radius :^)<p>
|
|
<em>iframe to the welcome page</em>
|
|
<br>
|
|
<iframe style="border-radius: 50%; border: none; width: 300px; height: 200px;" src="welcome.html"></iframe>
|
|
<br>
|
|
<em>Fun canvas demo</em>
|
|
<br>
|
|
<canvas id="fun-canvas" style="border-radius: 30%;" width="200" height="200"></canvas>
|
|
<script src="fun-canvas.js"></script>
|
|
<script>
|
|
makeFunCanvas("fun-canvas")
|
|
</script>
|
|
<br/>
|
|
<br/>
|
|
|
|
<p>These test the inner border-radius shrinking to accommodate the border</p>
|
|
<em>An <code><img></code> tag with a border-radius and a border</em>
|
|
<br>
|
|
<img src="car.png" style="border-radius: 100%; border: 10px solid limegreen;">
|
|
<br/>
|
|
<em>Clipping text overflow with a border-radius and a border</em>
|
|
<div style="width: 100px; height: 100px; border-radius: 30%; background-color: cyan; overflow: hidden; border: 20px solid salmon;">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
|
|
<p>The boxes are 50x50px</p>
|
|
<em>All round 10px</em>
|
|
<div class="box box-1"></div>
|
|
<br>
|
|
<em>All round 5,10,15,20px</em>
|
|
<div class="box box-1-1"></div>
|
|
<br>
|
|
<em>All round 20px</em>
|
|
<div class="box box-1-5"></div>
|
|
<br>
|
|
<em>All round 20px, border widths 1px 5px 10px 12px</em>
|
|
<div class="box box-1-6"></div>
|
|
<br>
|
|
<em>All round 15px 5px thick</em>
|
|
<div class="box box-1-7"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick</em>
|
|
<div class="box box-1-8"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick inset</em>
|
|
<div class="box box-1-9"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick outset</em>
|
|
<div class="box box-1-10"></div>
|
|
<br>
|
|
<em>Single border with minor radius</em>
|
|
<div class="box box-1-11"></div>
|
|
<br>
|
|
<em>Four border with different colors</em>
|
|
<div class="box box-1-12"></div>
|
|
<br>
|
|
<em>Border radius with top and bottom zero width</em>
|
|
<div class="box box-1-13"></div>
|
|
<br>
|
|
<em>Border radius with left and right zero width</em>
|
|
<div class="box box-1-14"></div>
|
|
<br>
|
|
<em>top-left 10px</em>
|
|
<div class="box box-2"></div>
|
|
<br>
|
|
<em>top-right 10px</em>
|
|
<div class="box box-3"></div>
|
|
<br>
|
|
<em>bottom-right 10px</em>
|
|
<div class="box box-4"></div>
|
|
<br>
|
|
<em>bottom-left 10px</em>
|
|
<div class="box box-5"></div>
|
|
<br>
|
|
<br>
|
|
<p>200px box, 75px radius</p>
|
|
<div class="box box-6"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>Test truncation:</p>
|
|
<em>Box is 50x50, border-radius is 500px</em>
|
|
<div class="box box-14"></div>
|
|
<div class="box box-15"></div>
|
|
<br>
|
|
<br>
|
|
|
|
</body>
|
|
|
|
</html>
|