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

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

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

ve
ve
5,048 Points

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.

ve
ve
5,048 Points
ve
ve
5,048 Points

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!

ve
ve
5,048 Points

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

Scott Laughead
Scott Laughead
12,750 Points
Scott Laughead
Scott Laughead
12,750 Points

In your style.css file add:

input[type="button"] {
border-radius: 5px; //whatever you want the radius to be
}
Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

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#

Sarah Dillon
Sarah Dillon
10,704 Points
Sarah Dillon
Sarah Dillon
10,704 Points

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