The Basics steps on web design

The Basics steps on web design

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.

Border-radius
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;
   }
Top-left

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;
   }
QuaterCircle

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!