# freeCodeCamp Challenge Guide: Add Rounded Corners with border-radius

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 2, 2016, 7:07pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649 "2016-07-02T19:07:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [July 2, 2016, 7:07pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/1 "2016-07-02T19:07:02Z")

</div>

# [Add Rounded Corners with border-radius](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-rounded-corners-with-border-radius)

* * *

## Problem Explanation

Sometimes you want to have rounded corners instead of square ones. In this case we use the “border-radius” property to determine how rounded we want our corners to be.

To adjust the roundness of a corner use:

```css
.example {
border-radius: 5px;
}

```

The higher the number, the more round the corner.

```css
.example {
border-radius: 20px;
}

```

Using the border-radius property we can round the corners of our element, whether that means rounding a border, a background image, or the fill color of the element itself. You will only notice the new rounded corners if there is a color change!

If you only include one number, that radius will be applied to all four corners. If you use two values, the first applies to the top-left and bottom right corners while the second applies to the top-right and bottom-left.

```css
.exampleTwoValues {
border-radius: 5px 10px;
}

```

If you use four values, the values apply to top-left, top-right, bottom-right, and bottom left.

```css
.exampleFourValues {
border-radius: 5px 7px 10px 15px;
}

```

If you use three values, the first applies to top-left, the second applies to top-right AND bottom-left, and the third applies to the bottom right.

```css
.exampleThreeValues {
border-radius: 5px 10px 15px;
}

```

---

<div class="post-metadata">

**Author:** ![Neko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/neko/32/61042_2.png) [@Neko](https://forum.freecodecamp.org/u/Neko)\
**Post date:** [July 6, 2017, 3:47pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/2 "2017-07-06T15:47:49Z")

</div>

For adding the second class for the green border around the cat picture used coma after smaller - image (img class=“smaller-image thick-green-border”) If anymore concerns, reply me so I can help you 🙂

---

<div class="post-metadata">

**Author:** ![Dutchman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dutchman/32/146536_2.png) [@Dutchman](https://forum.freecodecamp.org/u/Dutchman)\
**Post date:** [July 14, 2017, 7:14am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/3 "2017-07-14T07:14:14Z")

</div>

Here is the correct answer. just add border radius into your existing

 .red-text { color: red; }

h2 {  
font-family: Lobster, Monospace;  
}

p {  
font-size: 16px;  
font-family: Monospace;  
}

.thick-green-border {  
border-color: green;  
border-width: 10px;  
border-style: solid;  
border-radius: 10px;  
}

.smaller-image {  
width: 100px;  
}

---

<div class="post-metadata">

**Author:** ![ProDigit](https://avatars.discourse-cdn.com/v4/letter/p/9dc877/32.png) [@ProDigit](https://forum.freecodecamp.org/u/ProDigit)\
**Post date:** [August 4, 2017, 9:16am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/4 "2017-08-04T09:16:04Z")

</div>

Can anyone help with the second possibility, by adding the border command within the \<img …\> brackets?

---

<div class="post-metadata">

**Author:** ![ProDigit](https://avatars.discourse-cdn.com/v4/letter/p/9dc877/32.png) [@ProDigit](https://forum.freecodecamp.org/u/ProDigit)\
**Post date:** [August 4, 2017, 9:18am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/5 "2017-08-04T09:18:34Z")

</div>

Yeah, the site says the border radius doesn’t need to be defined in CSS style; but could be applied directly to the img bracket. How to do that? ( \<img … border-radius:10px;\> isn’t doing it…

---

<div class="post-metadata">

**Author:** ![ProDigit](https://avatars.discourse-cdn.com/v4/letter/p/9dc877/32.png) [@ProDigit](https://forum.freecodecamp.org/u/ProDigit)\
**Post date:** [August 4, 2017, 9:21am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/6 "2017-08-04T09:21:14Z")

</div>

Never mind,  
the second possible answer to the round borders, aside from adding it to the style, is adding:

**style=border-radius:10px;** to the ‘img’, like below:

`<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. " style=border-radius:10px;>`

---

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 10, 2019, 1:18am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/8 "2019-08-10T01:18:35Z")

</div>



---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 4:03pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-add-rounded-corners-with-border-radius/16649/9 "2025-01-08T16:03:03Z")

</div>