Border Radius

Question

Top bar color ***********************************************/ html { border-top: 65px solid #4D7094; }

/*********************************************** Body styling ***********************************************/ body { max-width: 600px; margin: 0 auto; padding: 20px 20px; font-size: 0.75em; line-height: 1.6em; font-family: Helvetica Neue, Helvetica, Arial, serif; color: #066; font-weight: 300; }

.centered { text-align: right; }

/*********************************************** Image styling ***********************************************/ img { border-radius: 100%; max-width: 340px; }

/*********************************************** Headline styling ***********************************************/ h1 { font-size: 1.5em; line-height: .5em; color: #564581; }

h2 { font-size: 1em; line-height: 1em; font-style: oblique; color: #aaa; }

h3 { font-size: .875em; line-height: 1em; font-weight: normal; }

h4 { margin-top: 60px; font-weight: 500; color: #564581; }

style.css

/***********************************************
Top bar color 
***********************************************/
html {
  border-top: 65px solid #4D7094;
}

/***********************************************
Body styling 
***********************************************/
body {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 20px;
  font-size: 0.75em;
  line-height: 1.6em;
  font-family: Helvetica Neue, Helvetica, Arial, serif;
  color: #066;
  font-weight: 300;
}

.centered {
  text-align: right;
}

/***********************************************
Image styling 
***********************************************/
img {
  border-radius: 100%;
  max-width: 340px;
}

/***********************************************
Headline styling 
***********************************************/
h1 {
  font-size: 1.5em;
  line-height: .5em;
  color: #564581;
}

h2 {
  font-size: 1em;
  line-height: 1em;
  font-style: oblique;
  color: #aaa;
}

h3 {
  font-size: .875em;
  line-height: 1em;
  font-weight: normal;
}

h4 {
  margin-top: 60px;
  font-weight: 500;
  color: #564581;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>All About Joy's Page</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet">
  </head>   
  <body> 
    <img src="sam.jpg" alt="Sam">

    <h1>My Name</h1>

    <h2>My Profession</h2>

    <h3>Where I Live</h3>

    <h4>What I do:</h4>
       <p>I'm a teacher at Treehouse, but you should write in what you do here!</p>

    <h4>What I enjoy doing:</h4>  
      <p>When I'm not writing code, I like to surf and play music. Your turn, write in something that makes you happy, or things you like to do in your free time.</p>

  </body>
</html>

Answer 1 · 2016-01-12T12:06:45Z

January 12, 2016 12:06pm

Hi Ashish

The question was asking you to adjust the border radius on the img tag for 100% to 20%, so all you need to do in the css is find the code linking to the img {} and adjust it.

It looks like all you need to do is adjust the following code from

This:

/***********************************************
Image styling 
***********************************************/
img {
  border-radius: 100%;
  max-width: 340px;
}

to this:

/***********************************************
Image styling 
***********************************************/
img {
  border-radius: 20%;
  max-width: 340px;
}

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

Ashish Chalukya

Ashish Chalukya

Border Radius

1 Answer

Samuel Glister

Samuel Glister