Bonding Through Coding

Border Radius

border radius is often used for objects that have a border. This can be the border of a textbox, or the border of an image. By increasing the value of border-radius, you can round the edges. The larger the value, the rounder the borders are, eventually leading to a circle! We can pass both pixels and percentages to the border-radius property.

Example

Here’s an example on how I might alter the border-radius on an image.

img {
    border-radius: 20px; 
}

Border radius is really useful if you want to make the edges of a box easier to look at!

If you want to know more about the border-radius property, you can go to the links at MDN Web Docs or w3schools. Both of these sites give excellent examples of the border-radius CSS property that are interactive, and allow you to change and alter the values to see how the property works.