1

I am working on a simple application, and haven't made a style sheet in a while. My header seems to be extending too far, as the border-radius doesn't appear to change for the right side of the element.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>To Do List App</title>

    <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
    <link rel="stylesheet" type="text/css" href="resources/css/style.css">

</head>

<body>
    <header>
        <!--->
        <input type="text" placeholder="Enter a task...">
        <button></button>
        <!-->
    </header>
     
</body>



</html>

CSS:

@charset "UTF-8";



header {
    width: 100%;
    height: 80px;
    position: fixed;
    padding: 15px;
    top:0;
    left:0;
    
    z-index:5;
    background: #DEB887;
    box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
rk32
  • 11
  • 1

1 Answers1

3

Try to add box-sizing property to your header in CSS file. This makes element not exceed the size when you add padding.

    header {
        box-sizing: border-box;
        width: 100%;
        height: 80px;
        position: fixed;
        padding: 15px;
        top:0;
        left:0;

        z-index:5;
        background: #DEB887;
        box-shadow: 0px 2px 4px rgba(44,62,80,0.15);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
Mehmet Ali
  • 313
  • 3
  • 15
  • 1
    If you could use box-sizing in all elements you would set it only once. `* {box-sizing: border-box;}` – luenib Aug 31 '20 at 14:30