Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Customizing Colors and Fonts Resize Text

Is it possible to set/change a link/image border style?

The question isn't regarding anything in this video. I was just thinking about it. Is it possible to change the thickness of a link (or image) border, use a .........., ----------, or ******** border? Is it possible to create custom borders or download borders from the internet?

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

I do not normally link W3Schools as I do not approve of them as a good source but they do have a full list of border options here:

http://www.w3schools.com/css/css_border.asp

You can also have completly custom borders using CSS3 border-image. CSS3 border-image has very good support in most mordern browsers, unfortunately as normal internet explorer isn't up to par and it is only compatible in IE11 and Edge. Luckily it degrades gracefully by also declaring a normal border.

border-image is probably one of the most complicated new additions to CSS3 and I am not even going to attempt to explain it, but there is an amazing guide over at CSS-tricks with the best explination I have seen:

https://css-tricks.com/understanding-border-image/

Joel Rivera
Joel Rivera
29,401 Points

You would do this with css which is the style sheet that is used with html. Html is the markup language and css provides the styling.

example css:

a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: green;
    color: white;
}

What you're doing here is targeting the link with pseudo classes and having it seem like a box with hover effects. In the css above you can replace solid with dotted etc. You can also change the width of the border in pixels etc.

Hopefully this helps. Good Luck.

Taken from W3schools (Values):

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Also taken from W3Schools (Properties):

With CSS3, you can give any element "rounded corners", by using the border-radius property. With the CSS3 border-image property, you can set an image to be used as the border around an element.