CSS border-bottom-right-radius — нижній правий кут

HTML

<div>Заокруглений тільки нижній правий кут.</div>

CSS

div {
    border: 2px solid;
    border-bottom-right-radius: 2em;
    padding: 12px;
}

HTML

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-bottom-right-radius</strong>.</p>

<p>Вона встановлює заокруглення для нижнього лівого кута кордону елемента на сторінці.</p>

<strong>border-bottom-right-radius: </strong>
<input type="number" class="input" id="num" value="12">px
<strong>;</strong>
  
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
  border-bottom-right-radius: 12px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-bottom-right-radius', num + 'px'));
}));

HTML

<div class="wrap">
    <div class="box r1"><span>40px</span></div>
    <div class="box r2"><span>80px 30px</span></div>
    <div class="box r3"><span>50%</span></div>
    <div class="box r4"><span>150px — стиснуто</span></div>
</div>

<p class="cap">Вкладена картинка: ліворуч кут заокруглено, але без overflow: hidden
    вона лізе за криву; праворуч overflow: hidden додано:</p>
<div class="wrap">
    <div class="box r5"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Crect width='200' height='100' fill='%232f6fd0'/%3E%3C/svg%3E"></div>
    <div class="box r6"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Crect width='200' height='100' fill='%2372b043'/%3E%3C/svg%3E"></div>
</div>

<p class="cap">border-collapse: collapse — заокруглення ігнорується:</p>
<table class="collapsed">
    <tr><td>collapse</td><td>collapse</td></tr>
</table>

<p class="cap">border-collapse: separate — працює:</p>
<table class="separated">
    <tr><td>separate</td><td>separate</td></tr>
</table>

CSS

.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #f2b134;
    border: 3px solid #c0392b;
}

.box span {
    position: absolute;
    left: 8px;
    top: 8px;
    font: 600 13px/1.3 system-ui, sans-serif;
}

.box img {
    display: block;
    width: 100%;
    height: 100%;
}

.r1 { border-bottom-right-radius: 40px; }
.r2 { border-bottom-right-radius: 80px 30px; }
.r3 { border-bottom-right-radius: 50%; }

.r4 {
    border-bottom-right-radius: 150px;
    border-top-right-radius: 150px;
}

.r5 {
    border-bottom-right-radius: 40px;
}

.r6 {
    border-bottom-right-radius: 40px;
    overflow: hidden;
}

.cap {
    margin: 18px 0 6px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

table {
    font: 13px/1.4 system-ui, sans-serif;
}

.collapsed {
    border-collapse: collapse;
}

.separated {
    border-collapse: separate;
    border-spacing: 6px;
}

td {
    padding: 10px 14px;
    background: #eaf3ff;
    border: 3px solid #2f6fd0;
    border-bottom-right-radius: 20px;
}

HTML

<div class="info">
	<p>За допомогою властивості <code>border-bottom-right-radius</code> ми можемо заокруглити правий нижній кут кордону елемента.</p>
	<p>Ви бачите три блоки з ідентичним загальним кордоном, але два останніх мають заокруглений кут.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block proc"></div>
	<div class="block px"></div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
	line-height: 1.45;
}

.info {
	padding: 4px 16px 8px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 150px;
	background-color: gold;
	border: 16px solid #444;
}

.block.proc {
	border-bottom-right-radius: 45%;
}

.block.px {
	border-bottom-right-radius: 40px;
}

HTML

<div class="block">
  <p>Як бачимо, фонове зображення округлилося разом із межею...</p>
</div>

CSS

.block {
  width: 650px;
  height: 450px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='940' height='650' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") center center no-repeat;
  background-size: cover;
  
  border: 10px solid #444;
  border-bottom-right-radius: 50%;
  
  font-family: sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  padding-top: 75px;
  box-sizing: border-box;
  text-align: left;
  padding-left: 5px;
}