blob: 8d70cdeb9480859bc063a943c8e678fd8b883fdc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<style>
div {
width:100px;
height:100px;
border: 2px solid black;
}
.control {
border-radius:50px;
}
.pixels {
border-radius:calc(50px);
}
.percent {
border-radius:calc(50%);
}
.both {
/* Note that 100% is 104px, so 25% + 25px = 51px*/
border-radius:calc(25% + 25px);
}
</style>
This test should have four circles.
<div class="control"></div>
<div class="pixels"></div>
<div class="percent"></div>
<div class="both"></div>
|