Thursday, 08 August 2019 08:24

How to give rounded corners to a element using css

Written by 
Rate this item
(0 votes)

In CSS3 it's possible to give elements rounded 

corners using the border-radius property.

 Let’s look at an example - 

Suppose you have the following markup  -

<div class="my_div"></div>

To make the div visible, we need to set its width 

and height and give it a background color  

.my_div {

  background-color: blue;

  width: 100px;

  height: 100px;


To make div’s borders rounded, you could add following styling : 

border-radius: 15px;


The border-radius property can be set in various ways like 

border-radius: 15px 15px 15px 15px; it sets value for 4 corners.

Read 1387 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.

Latest discussions

  • No posts to display.