RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:27:45 +00:00
Code Issues Activity Actions

Base: Add some elliptical border radius HTML examples

Browse source
This commit is contained in:
MacDue 2022-06-12 15:52:09 +01:00 • committed by Linus Groh
parent 2b40dbfb30
commit 16c4b606f6
1 changed files with 54 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
Base/res/html/misc/border-radius.html
View file

@ -139,6 +139,39 @@
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%;
}
</style>
</head>
@ -174,6 +207,27 @@
<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>
<br>
<p>The boxes are 50x50px</p>
<em>All round 10px</em>
<div class="box box-1"></div>