Rounded Corners Box With Css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Rounded Corners Box With Css

    Here is an example how to create rouded boxes with css.

    css:
    Code:
    .r1, .r2, .r3, .r4, .r5 { display: block; height: 1px; overflow: hidden; font-size:1px;}
    .r5 { margin: 0 5px; background-color: #D0CBB8; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    .r4 { margin: 0 4px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    .r3 { margin: 0 3px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    .r2 { margin: 0 2px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    .r1 { margin: 0 1px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    #rounded-box { margin:3px 0em; }
    .inner-box { background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
    #rounded-box .inner-box { padding: 0px 7px;}
    usage

    Code:
    <div id='rounded-box'><b class='r5'><b class='r3'><b class='r2'><b class='r1'><b class='r1'> 
    <div class='inner-box'>
    Your content here
    
    </div> <b class='r1'><b class='r1'><b class='r2'><b class='r3'><b class='r5'></div>
    Advertise your mobile site for FREE with AdTwirl


    #2
    nice..

    Comment


      #3
      Im guess the code goes in themes folder.

      Comment


        #4
        not everyone uses lava and wapdesire reece . think gums has posted as a general tip .
        Wapchat4u


        Topsites4u

        Comment


          #5
          Originally posted by bhushan
          COOL... Thanks
          Next time please use the "thanks" button.....
          Advertise your mobile site for FREE with AdTwirl

          Comment


            #6
            Originally posted by GumSlone View Post
            Here is an example how to create rouded boxes with css.

            css:
            Code:
            .r1, .r2, .r3, .r4, .r5 { display: block; height: 1px; overflow: hidden; font-size:1px;}
            .r5 { margin: 0 5px; background-color: #D0CBB8; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            .r4 { margin: 0 4px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            .r3 { margin: 0 3px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            .r2 { margin: 0 2px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            .r1 { margin: 0 1px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            #rounded-box { margin:3px 0em; }
            .inner-box { background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
            #rounded-box .inner-box { padding: 0px 7px;}
            usage

            Code:
            <div id='rounded-box'><b class='r5'><b class='r3'><b class='r2'><b class='r1'><b class='r1'> 
            <div class='inner-box'>
            Your content here
            
            </div> <b class='r1'><b class='r1'><b class='r2'><b class='r3'><b class='r5'></div>
            wow gum this really looks awesome on your toplist. Great job man

            click here to join blingywap.co.za
            http://blingywap.co.za


            IF YOU NEED HELP JUST ASK AND ALWAYS SAY THANK YOU!

            Comment


              #7
              anyway to do this in a simplified code like 1 tag... 1 id tag and 4 class tags is bit messy

              Comment


                #8
                why there 5 class tags lol code i hav seen uses 4 lol


                PHP Code:
                .rtop * {display:block; height:1px; overflow:hidden; background:#<?=$navcolor?>;}
                .r1 {margin:0 5px;}
                .r2 {margin:0 3px;}
                .r3 {margin:0 2px;}
                .r4 {margin:0 1px; height: 2px;}

                Comment


                  #9
                  Originally posted by murshid7
                  how to do this if we dont have css for example in methos version 2 how to do this it does not containt css file
                  just cos you aren't able to see *.css file..
                  that doens't mean there isnt one
                  It's better to keep your mouth shut and give the impression that you're stupid, than to open it and remove all doubt.
                  ⓣⓗⓔ ⓠⓤⓘⓔⓣⓔⓡ ⓨⓞⓤ ⓑⓔ©ⓞⓜⓔ, ⓣⓗⓔ ⓜⓞⓡⓔ ⓨⓞⓤ ⓐⓡⓔ ⓐⓑⓛⓔ ⓣⓞ ⓗⓔⓐⓡ !
                  ιη тнєσяу, тнє ρяα¢тι¢є ιѕ α яєѕυℓт σƒ тнє тнєσяу, вυт ιη ρяα¢тι¢є ιѕ тнє σρρσѕιтє.
                  キノgんイノ刀g 4 ア乇ムc乇 ノ丂 レノズ乇 キucズノ刀g 4 √ノ尺gノ刀ノイリ!

                  Comment


                    #10
                    Thanks friend, its a most useful post for devlopers.

                    Comment


                      #11
                      i am not getting how to use.. i copy pasted the code u gave in css file n put that in my public_html .. n used the usage code in index but still not working..

                      Comment


                        #12
                        Originally posted by icedroplet1987 View Post
                        i am not getting how to use.. i copy pasted the code u gave in css file n put that in my public_html .. n used the usage code in index but still not working..
                        HTML Code:
                        <style type="text/css">
                        .opticalpigion{display:block}
                        .opticalpigion *{
                          display:block;
                          height:1px;
                          overflow:hidden;
                          font-size:.01em;
                          background:#FFFFFF}
                        .opticalpigion1{
                          margin-left:3px;
                          margin-right:3px;
                          padding-left:1px;
                          padding-right:1px;
                          border-left:1px solid #776e6e;
                          border-right:1px solid #776e6e;
                          background:#c3bfbf}
                        .opticalpigion2{
                          margin-left:1px;
                          margin-right:1px;
                          padding-right:1px;
                          padding-left:1px;
                          border-left:1px solid #281a1a;
                          border-right:1px solid #281a1a;
                          background:#d1cece}
                        .opticalpigion3{
                          margin-left:1px;
                          margin-right:1px;
                          border-left:1px solid #d1cece;
                          border-right:1px solid #d1cece;}
                        .opticalpigion4{
                          border-left:1px solid #776e6e;
                          border-right:1px solid #776e6e}
                        .opticalpigion5{
                          border-left:1px solid #c3bfbf;
                          border-right:1px solid #c3bfbf}
                        .opticalpigionfg{
                          background:#FFFFFF}
                        </style>
                        
                        <div>
                          <b class="opticalpigion">
                          <b class="opticalpigion1"><b></b></b>
                          <b class="opticalpigion2"><b></b></b>
                          <b class="opticalpigion3"></b>
                          <b class="opticalpigion4"></b>
                          <b class="opticalpigion5"></b></b>
                        
                          <div class="opticalpigionfg">
                            content goes here
                          </div>
                        
                          <b class="opticalpigion">
                          <b class="opticalpigion5"></b>
                          <b class="opticalpigion4"></b>
                          <b class="opticalpigion3"></b>
                          <b class="opticalpigion2"><b></b></b>
                          <b class="opticalpigion1"><b></b></b></b>
                        </div>
                        sigpic

                        Comment


                          #13
                          heres another one too.
                          Not actually a rounded corner but close it.
                          its a notched corners
                          Code:
                          /* CSS File */
                          .feature {
                              border:solid #647aae;
                               border-width:0 1px;
                              background:#b0c0e6;
                          }
                          .feature div {
                            position:relative;
                            top: -1px;
                            left: 0;
                            border:solid #647aae;
                            border-width:1px 0 0;
                          }
                          .feature div div {
                              top: 2px;
                              border-width:0 0 1px;
                              padding: .3em .3em .1em;
                          }
                          Usage:
                          Code:
                              <div class="feature">
                                  <div>
                                      <div>
                                          <p>This is an example of the notched corners as applied to a div container.</p>
                                          <p>This is an example of the notched corners as applied to a div container.</p>
                                          <p>This is an example of the notched corners as applied to a div container.</p>
                                      </div>
                          
                                  </div>
                              </div>

                          Comment


                            #14
                            Optical pigeon dats frm my site lmao.

                            Comment


                              #15
                              ?? D **** u talkn about?

                              Comment

                              Working...
                              X