CSS | Как заполнить по ширине блок внутри закругленного блока?

Question

Я пробую свои силы в Express + HTML + CSS + JavaScript. Я делаю форму регистрации и щас на главной странице. Но у меня появилась интересная идея. Я закруглил блок в котором выбор между регистрацией и логином. И внутри него я заголовок h1, у которого задний фон до конца границ родительского блока. Как мне сделать чтобы не выходили за закругленные углы родительского блока.

body {
    background-color: #DDDDDD;
}
.main {
    background-color: #CBCBCB;
    padding: 50px;
    padding-top: 10px;
    width: 800px;
    margin: auto;
    position: relative;
    margin-top: 2em;
    border: 16px solid #3A3A3A;
    border-radius: 100px;
}
.main-header {
    background-color: #3A3A3A;
    position: relative;
    color: azure;
    height: 50px;
}
a:link {
    color: #0000EE;
    text-decoration: none;
}
a:visited {
    color: #0000EE;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/style.css">
</head>

<body>
    <div class="main">
        <div class="main-header">
            <h1 style="text-align: center;">Welcome you!</h1>
        </div>

        <h2 style="text-align: center;"><a href="/auth/register">Register</a> or <a href="/auth/login">Login</a> for
            join to us!
        </h2>
    </div>
</body>

</html>

Answer 1

Убираете отступ у .main и добавляете этого нуждающегося содержимого, предварительно обернув его.
Так же добавьте .main overflow: hidden;, чтобы обрезать границы дочерних при border-radius.

body {
  background-color: #DDDDDD;
}

.main {
  background-color: #CBCBCB;
  width: 800px;
  margin: auto;
  position: relative;
  margin-top: 2em;
  overflow: hidden;
  border: 16px solid #3A3A3A;
  border-radius: 100px;
}

.main-header {
  background-color: #3A3A3A;
  position: relative;
  color: azure;
  height: 50px;
}

.main-header h1 {
  margin: 0;
}

.main-content {
  padding: 50px;
  padding-top: 10px;
}

a:link {
  color: #0000EE;
  text-decoration: none;
}

a:visited {
  color: #0000EE;
  text-decoration: none;
}

<div class="main">
  <div class="main-header">
    <h1 style="text-align: center;">Welcome you!</h1>
  </div>
  <div class="main-content">
    <h2 style="text-align: center;"><a href="/auth/register">Register</a> or <a href="/auth/login">Login</a> for join to us!
    </h2>
  </div>
</div>

БЛОГ НА HUSL

CSS | Как заполнить по ширине блок внутри закругленного блока?

Ответы (1 шт):