4.2 Border radius

Let’s round the corners on the background for each of our blog posts. Use the separate properties for each side with a value of 4px.

by sergiu079

HTML

<article>
    <header>
        <h1> This is my first article </h1>   
    </header>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus velit. Morbi odio. Ut in sapien. Proin nec erat vitae orci tincidunt iaculis. Morbi laoreet metus sed diam suscipit ultricies. Sed non libero ut nunc tristique dapibus. Sed mollis tellus aliquam est. Etiam at turpis. Donec a urna. Pellentesque sed ante at nisl luctus consequat.
    </p>
    <div class="author-img">
        &nbsp;
    </div>
</article>
<div class="btn"> 
        Comment
</div>

CSS

article {
    background: #ccc;
}

.author-img {
    width: 100px;
    height: 100px;
    background: #f00;
    
}

.btn {
    margin-top: 20px;
    margin-left: 40px;
    width: 200px;
    padding: 5px;
    background: blue;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
}