CODEWITHSUNDEEP
csscss-shapes
christian
christian

Reputation: 2489

Capsule shape using border-radius without a set width or height?

Is it possible to make a capsule shape using border-radius without a set width or height?

I want the left and right sides to be completely rounded while the capsule would remain straight along it's horizontal length. Setting the radius to 50% doesn't seem to give the desired affect.

Capsule Shape

Upvotes: 106

Views: 80336

Answers (6)

Charan Ghate
Charan Ghate

Reputation: 1394

This can be easily achieved using HTML Span. You have to just set the background-color and border-radius.

span {
  background-color: #30bb36;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
<p>Set a <span>Background Color</span> for only a part of a text.</p>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>

Upvotes: 2

Artik03
Artik03

Reputation: 1

To get capsule shape you can set the border radius to height of an element.

So if

height: 5rem;

than set

border-radius: 5rem;

If you use some padding or border set box-sizing: border-box; this includes the padding and border into an element's total height

Upvotes: 0

Timbergus
Timbergus

Reputation: 3253

If you use percentages, it takes the element width to calculate the radius. To have the capsule-shaped element, you need to pass to the border-radius property units like rem or px (neither I know the reason for this, but it works). This is why it works when passing 500px. You can use the same value for line-height and border-radius properties if you want.

.capsule {
    line-height: 48px;
    border-radius: 48px;
}

Here you have an example in CodePen. Try to change the variable $label-height to see how the shape is maintained while the height of the button changes.

In this example, you don't need to set the width or height of the element. You just need to adjust the content's height and padding.

The padding property is useful to set a separation between the contents and the component border. See how it looks if I only set the left padding.

enter image description here

If you set the line-height property of the container, you will set automatically the container height, and center the content inside the container at the same time.

If you want to set the component's width to the component's content width, you can set the component's display property to inline-block, and use FlexBox to arrange them in a column, for example. And then, set the left and right margins to auto, to avoid the element to grow to its parent width.

enter image description here

And if you want to leave a space between the components, you can set the margin-top property between consecutive components.

.capsule + .capsule {
    margin-top: 15px;
}

Hope it helps :)

Upvotes: 9

Nathan Powell
Nathan Powell

Reputation: 143

This is what I have found to work well:

border-radius: 50vh;

Browser support looks good for that now too.

To explain, the vh is a "Viewport Unit" that computes the height of the viewport in pixels. By saying 50vh to declare the border radius, it is 50% * (Viewport Height)px.

Upvotes: -3

Jeremy Cook
Jeremy Cook

Reputation: 22063

Applying a very large border radius seems to work on many browsers (IE9+, FF, Chrome) like this mod of David's fiddle http://jsfiddle.net/cthQW/1/

border-radius: 500px;

Upvotes: 166

David Thomas
David Thomas

Reputation: 253318

Yes, this is possible (albeit I've only tested in Chromium 28/Ubuntu 12.10):

div {
    /* this is the only relevant part: */
    border-radius: 20%/50%;

    /* this is irrelevant, and just so the element can be visualised/displayed: */
    width: 50%;
    height: 5em;
    margin: 2em auto;
    background-color: #000;
}

JS Fiddle demo.

The important information is, obviously, the 20%/50% property-value; the 20% is the 'horizontal length' of the radius, whereas the 50% is the 'vertical length'; using two different measurements gives an elliptical curve to the border, instead of a single measurement, which yields the more circular radius. Obviously this requires a certain amount of adjustment to your own requirements

References:

Upvotes: 28

Related Questions