CODEWITHSUNDEEP
htmlcss
casillas
casillas

Reputation: 16793

Round Rectangle in CSS

I would like to generate rounded rectangle - following UI in CSS,

enter image description here

However I am facing some difficulties to generate it.Here is my code snippet

ul {
            padding: 0;
            list-style-type: none;
            border: 1px solid #ccc;
            border-radius: 10px; 
}

li  {
            overflow: hidden;
}


li:last-child {
    padding:7px;
}

li:not(:last-child) {
    padding:7px;
    border-bottom:1px solid #DDD;
}


    .parent:nth-of-type(odd) {
        background-color: rgb(40,40,40);
}

    .parent:nth-of-type(even) {
        background-color: black;
}


<div>
<ul>
<li class="parent">
    <label class="labeltitle">NAME</label>
    <label id="firstTF">100</label>
    <label class="unitlabels">UNIT</label>
</li>
<li class="parent">
     <label class="labeltitle">NAME</label>
     <label id="secondTF">200</label>
     <label class="unitlabels">UNIT</label>
</li>
</ul>
</div>

Upvotes: 0

Views: 1185

Answers (6)

Pianoc
Pianoc

Reputation: 797

Here is a JSFiddle solution based on your code: http://jsfiddle.net/shannabarnard/2an76txm/

HTML: 

<ul>
    <li class="parent">
        <label class="labeltitle">NAME</label>
        <label id="firstTF">100</label>
        <label class="unitlabels">UNIT</label>
    </li>
    <li class="parent">
         <label class="labeltitle">NAME</label>
         <label id="secondTF">200</label>
         <label class="unitlabels">UNIT</label>
    </li>
</ul>

CSS:

ul {
     padding: 0;
     list-style-type: none;
      width: 120px;          
}

li  {
    overflow: hidden;
    border-radius: 10px; 
    border:1px solid #000;
}

li label {
    display:block;
    text-align: center;
    font-size: 24px;
    padding:3px 0;
}
li label.labeltitle {
    font-size: 16px;
    color: #CCC;
}
li label.unitlabels {
    font-size: 16px;
    color: white;
}
.parent:nth-of-type(odd) {
   background-color: #555;
}

.parent:nth-of-type(even) {
   background-color: #777;
}

Upvotes: 2

Lucky Soni
Lucky Soni

Reputation: 6878

ul {
  display: inline-block;
  list-style: none;
}
.parent {
  border-radius: 10px;
  text-align: center;
  border: 2px solid rgb(61, 58, 58);
  line-height: 0.8;
  padding: 5px 24px;
}
.parent:nth-of-type(odd) {
  background-color: rgb(40, 40, 40);
}
.parent:nth-of-type(even) {
  background-color: #444;
}
.parent label {
  display: block;
  padding: 5px;
}
.labeltitle,
.unitlabels {
  color: #fff;
}
.tf {
  font-size: 28px;
}
<ul>
  <li class="parent">
    <label class="labeltitle">NAME</label>
    <label id="firstTF" class="tf">100</label>
    <label class="unitlabels">UNIT</label>
  </li>
  <li class="parent">
    <label class="labeltitle">NAME</label>
    <label id="secondTF" class="tf">200</label>
    <label class="unitlabels">UNIT</label>
  </li>
</ul>

Upvotes: 2

Trevan Hetzel
Trevan Hetzel

Reputation: 1369

As has been mentioned already, you need to put the border and border-radius on the li and not the ul. Here's a CodePen with some cleaned up code for you: http://codepen.io/trevanhetzel/pen/pJzws

HTML

<div>
  <ul>
    <li class="parent">
        <label class="labeltitle">NAME</label>
        <label id="firstTF">100</label>
        <label class="unitlabels">UNIT</label>
    </li>
    <li class="parent">
         <label class="labeltitle">NAME</label>
         <label id="secondTF">200</label>
         <label class="unitlabels">UNIT</label>
    </li>
  </ul> <!--you were missing a closing ul tag-->
</div>

CSS

ul {
  list-style-type: none;          
}

li  {
  overflow: hidden;
  border-radius: 10px; 
  border: 1px solid #ccc;
  padding: 7px;
  border-bottom: 1px solid #DDD;
}

li:last-child {
  padding:7px;
  border-bottom: 0;
}


.parent:nth-of-type(odd) {
  background-color: rgb(40,40,40);
}

.parent:nth-of-type(even) {
  background-color: black;
}

Upvotes: 2

JRulle
JRulle

Reputation: 7568

You have to apply the rounded edge styles to your <li> not the <ul>
Also pretty much all of the styles you applied to <ul> belong on <li>

li {
    padding: 0;
    list-style-type: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    max-width: 100px;
}

DEMO : with additional styles to more closely mimic your desired output

Upvotes: 1

Vall3y
Vall3y

Reputation: 1181

You put the border on the ul element, instead of the li elements. You also didnt close the ul

li  {
    border: 1px solid #ccc;
    border-radius: 10px; 

    overflow: hidden;
}

Heres a jsfiddle:

http://jsfiddle.net/tsyg465a/

Upvotes: 4

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

Add style for li as

li{
border-radius: 10px;
}

Upvotes: 2

Related Questions