CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
user11658543
user11658543

Reputation:

Bootstrap rounded top right corner

I have a Bootstrap list-group-flush to display a left vertical nav.

I want to have the top left corner rounded. class="rounded-top" works, but class="rounded-top-left", or class="rounded top-left" doesn't do anything?

Upvotes: 9

Views: 15184

Answers (7)

Lucien Mary
Lucien Mary

Reputation: 41

For only the top-left corner, you can use:

rounded rounded-bottom-0 rounded-end-0

This way, you round all corners with rounded. Then, you remove the bottom corners and the right corners (including the top-right corner).

Upvotes: 0

DavidASix
DavidASix

Reputation: 400

Round then Un-round Solution

Late to the party, but here is an answer to help any future round-corner-seekers.

If you only need to round the top right corner, you can round the top corners, the un-round the left corners:

<div class="rounded-top-4 rounded-start-0" />

This should leave you with a single top right rounded corner.

Upvotes: 0

5muqcS7AknXPSt
5muqcS7AknXPSt

Reputation: 95

This is possible with a combination of Bootstrap classes as of v5.

class="rounded-top-3 rounded-end-0" would round the top left corner.

Upvotes: 2

Ns789
Ns789

Reputation: 541

you can create your own class like:

.border-upper-radius {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }  
  .border-downer-radius {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

Upvotes: 0

user11658543
user11658543

Reputation:

I gave up on using Bootstrap's own default code and used the following CSS:

#corner1 {
            border-top-left-radius: 3px;
        }

<a href="home" id="corner1" class="list-group-item">Link here</a>

UPDATE: Looks like Bootstrap doesn't allow for rounding of a single corner https://v4-alpha.getbootstrap.com/utilities/borders/

Upvotes: 0

protestator
protestator

Reputation: 371

You can always create your own global classes. For example:

.rounded-top-left-1 {
    border-top-left-radius: 1rem;
}
.rounded-top-right-1 {
    border-top-right-radius: 1rem;
}
.rounded-bottom-left-1 {
    border-bottom-left-radius: 1rem;
}
.rounded-bottom-right-1 {
    border-bottom-right-radius: 1rem;
}

Upvotes: 12

Jacinator
Jacinator

Reputation: 1413

According to the docs for Bootstrap 4.3 there are no utility classes to only round one corner: https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius. If you want that class you'll have to write it yourself.

I just quickly browsed through Bootstrap 3.4 and 4.2.1. Version 3.4 doesn't have any border radius classes and 4.2 has fewer options, so this isn't something you can fix by switching to a different version.

Upvotes: 2

Related Questions