Таблиця віднощення кількості параметрів до кутів
| Кількість значень | Результат |
|---|---|
| 1 - border-radius: 20px | Всі чотири кути закруглені однаково. |
| 2 - border-radius: 20px 10px | Перше значення відноситься до верхнього лівого і нижнього правого кута, а друге значення відноситься до верхнього правого кута і лівого нижнього кута. |
| 3 - border-radius: 20px 20px 10px | Перше значення відноситься до верхнього лівого, друге значення - до верхнього правого і нижнього лівого, і третє значення відноситься до нижнього правого кута. |
| 4 - border-radius:20px 20px 30px 10px | Перше значення застосовується до верхнього лівого, друге значення застосовується до верхнього правого, третє значення відноситься до нижнього правого, і четверте значення відноситься до нижнього лівого кута. |
Якщо замість px застосовують відсотки %, відлік ведеться відносно ширини блоку.
Щоб встановити різні значення для горизонтальної та вертикальної частини, треба розділити два значення за допомогою “/”.border-radius: 2em 1em 4em / 0.5em 3em;
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
У цьому прикладі, Ви можете змінювати значення для властивості border-radius.
border-radius: px px px px ;
a {text-decoration: none;
outline: none;
display: inline-block;
color: white;
padding: 20px 30px;
margin: 10px 20px;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
background-size: 200% auto;
box-shadow: 0 0 20px rgba(0,0,0,.1);
transition: .5s;
}
a:hover {background-position: right center;}
Приклад 1
html {height: 100%} body { background: linear-gradient(to top, #55EFCB 0%, #5BCAFF 100%); height: 100%; } a { text-decoration: none; outline: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: white; border: 1px solid rgba(255,255,255,.4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; } a:before, a:after { content: ""; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; } a:before { bottom: 0; left: 0; border-left: 1px solid white; border-top: 1px solid white; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; } a:after { top: 0; right: 0; border-right: 1px solid white; border-bottom: 1px solid white; transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s; } a:hover:before, a:hover:after{ height: 100%; width: 100%; opacity: 1; } a:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;} a:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;} a:hover {background: rgba(255,255,255,.2);}
a { text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; } a:hover { background: #2EE59D; box-shadow: 0 15px 20px rgba(46,229,157,.4); color: white; transform: translateY(-7px); }
body {background:url(background54.png)} a { text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; } a:hover { box-shadow: 0 0 0 0 rgba(0,40,120,0); background-position: 0 0; }
a { text-decoration: none; outline: none; display: inline-block; margin: 10px 20px; padding: 15px 30px; overflow: hidden; border: 2px solid; border-bottom-width: 4px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: rgba(30,255,188,1); background: rgba(255,255,255,1); transition: color .3s, background .5s; } a:hover { animation: stripes .75s infinite linear; background: linear-gradient(45deg, rgba(30,255,188,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(30,255,188,1) 50%, rgba(30,255,188,1) 75%, rgba(255,255,255,1) 75%, rgba(255,255,255,1)); background-size: 10px 10px; color: #FF50E5; } @keyframes stripes { 0% {background-position: 0 0;} 100% {background-position: 50px 0;} }
body {background: #ebcacb;} a { text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; } span { font-family: 'Montserrat', sans-serif; position: relative; z-index: 5; } a:before, a:after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } a:before{ transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); } a:after { background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; } a:hover:before, a:hover:after {transform: translateX(0);}
body {background: #ffbfbe;} a { text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; font-family: 'Montserrat', sans-serif; color: #fe6637; transition: .2s ease-in-out; } a:before { content: ""; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); } a:hover { background: #fe6637; color: #fff; } a:hover:before { left: 150px; transition: .5s ease-in-out; }