Rounded corners is what we call the corners when they appearwell..rounded!
This functionality, if I may call it that, is accessed via a css property border-radius
that allows us to give any element rounded corners
, thus allowing us to thoughroughly shape the desired element.
Below is a div
element styled with a background colour and border of different colour.
#divroundedcorners {
background-color: lightgreen;
border-radius: 7px;
padding: 5px;
min-height: 100px;
margin: 0 3em;
}
In case we only want to cut one corner, we simply need to set the remaining corners to 0, like so:
#divroundonecorner {
background-color: lightskyblue;
border-radius: 0 27px 0 0;
padding: 5px;
min-height: 100px;
margin: 0 3em;
}