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

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Adding Buttons and Button Groups

How to get all the edges of the buttons rounded?

Two buttons have two sharp edges and two rounded. I want them all rounded. How do I do that? I tried border-radius, but it didn't work!

http://port-80-fejk6yu562.treehouse-app.com/

7 Answers

Can you add ID's to your buttons? If yes, do so and give them the border-radius you want. IDs are selectors of higher priority than classes.

In your button-groups.less and your bootstrap.css you appended following styles:

button-groups.less:
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

bootstrap.css:
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

Delete these lines (if you don't need them at other points) and it should work fine!

? I don't see these lines anywhere in my coding and I am sure I haven't appended these lines.. https://teamtreehouse.com/workspaces/22998992#

What program do you code with? Maybe bootstrap and button-groups are included by default? When you open your developer tools in the browser you work with (check google to find out how that works in your browser) and select your buttons, you see that the styling is added through the stylesheets bootstrap.css and button-groups.less

In your style.css file add:

input[type="button"] {
border-radius: 5px; //whatever you want the radius to be
}

Thanks, when I saw this code Scott, I also thought that it would solve it, but it didn't.

Great I am learning more about d-tools now. You are right Valerie. The lines you mentioned are in dev tools, but not in my code. So I tried a few things with border-top-right-radius and border-bottom-right-radius, the buttons corners didn't change.

I am coding with workspaces in bootstrap, with html and css. https://teamtreehouse.com/workspaces/22998992#

:D, yes, thanks!

I had this problem and turned out I didn't erase the type="button" when I changed the <button> tag to the <a> tag.