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

Base: Add some elliptical border radius HTML examples

This commit is contained in:
MacDue 2022-06-12 15:52:09 +01:00 committed by Linus Groh
parent 2b40dbfb30
commit 16c4b606f6

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>