Styling corners with one line

Styling corners works with margin and the border radius. To set the right and the left margin 15px in one line, we can use the margin short-hand .

button {
   margin: 0 15px 0 15px
   width: 100px;
   height: 100px;
   border-radius: 15px;
   background-color: red;
   border: solid 5px dimgray;
 }

Let have a kick view how border radius work . The image below show how border-radius round corner . Border-radius with four values rounds corners in the clockwise direction starting to top-right-bottom-left.

img {
   width: 250px;
   height: 300px;
   border-radius: 30px 0 30px 0;
   
 }

We can round just the left-top corner by changing the first value to 50px and leave the rest 0.

img {
    border-radius:50px 0 0 0;
    width: 250px;
   }

To take border-radius to the extreme, we can set it to the same value as height or width.

img {
    border-radius:0 0 0 100px;
    width: 100px;
    height: 100px;
    background-color: lightBlue;
    text-align: center;
   }

We can use border-radius to give images a unique touch by doing things like rounding top-left and bottom-left corner.