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 Dan Pasca

HTML

<article>
    <header>
        <h1 class="header-title"> 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;
    box-shadow: inset 2px 2px 3px black;
}

.author-img {
    width: 100px;
    height: 100px;
    background: #f00;
    border-radius: 50%;
}

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

.header-title {
    text-shadow: 2px 2px 2px orange;
}