3 replies [Last post]
Wizz
Wizz's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT+2
Joined: 2014-06-03
Posts: 2
Points: 5

Hi,

I'm new to the forums and CSS. My question pertains to circles.

I have a circle with a background photo that fits perfect; however, I want the circle to have a border-width and I want it to have a color. It doesn't work, tho. Here's the code:

---
.circle {

width: 170px;
height: 170px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 auto;

background: url(russianblue.jpg) no-repeat;
background-size: cover;
display: block;
border-width: 12px;
border-color: black;

background-position: 50% 1%;

}
---

How to fix this? The searches I've made on this issue ended up telling me about the border-radius.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Assuming this markup:  <div

Assuming this markup:
 <div class="circle"></div>

do this:

.circle {.circle {
    background: #94a9b7 url(russianblue.jpg) no-repeat;
    background-size: cover;
    border: 12px solid black;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 170px;
    margin: 0 auto;
    width: 170px;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wizz
Wizz's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT+2
Joined: 2014-06-03
Posts: 2
Points: 5

Thanks, Gary. Care to tell me

Thanks, Gary. Care to tell me why my version is not accepted? I thought that border-width designated the width of the border. When does it work and when doesn't it work?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Border style

You didn't specify what style border to use. See border style properties. Since the initial [default] value of the border styles is 'none', no borders will be visible unless the border style is set.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.