Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Clip

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Clip (Obsolete)

      CSS clipping property is used to create a clipping region for an element, which defines the visible area of the element.
      The clip property only applies to elements with absolute or fixed positioning. This chapter discusses how to use clip property.
      Though some browsers might still support it, this property is rarely used in modern web development. It's considered obsolete and non-standard. Instead, developers typically use theclip-path property, which provides more flexibility and control over clipping.
      Following are all possible values that can be used for clip property:
      • auto − The element is visible by default.
      • <shape> − The rect(top, right, bottom, left) value for the clip property defines a rectangular clipping region. The top and bottom values refer to the distance from the top border, while the right and left values refer to the distance from the left border.

      Applies to

      Only absolutely positioned elements.

      Syntax

      clip = <rect()> | auto;

      CSS clip - auto Value

      CSS clip: auto property does not clip the element, so the entire element is visible. This property applies to elements which have the position:absolute or position:fixed property. It is the default value.
      <html>
      <head>
      <style>
         .clip-auto {
            position: absolute;
            width: 200px;
            background-color: #3be028;
            padding: 10px;
            clip: auto; 
         }
      </style>
      </head>
      <body>
         <div class="clip-auto">
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </div>
      </body>
      </html>
      The following example demonstrates that the image will not be cropped, and it will be fully visible within its boundaries 
      <html>
      <head>
      <style>
         .clip-auto-img {
            position: absolute;
            width: 150px;
            padding: 10px;
            clip: auto; 
         }
      </style>
      </head>
      <body>
         <img src="images/tree.jpg" class="clip-auto-img"/>
      </body>
      </html>

      CSS clip - rect() Value

      You can set the clip: rect(top, right, bottom, left) property to specify a rectangular clipping region for an element. The top, right, bottom, and left values can be a length or auto. If auto, the element is clipped to the corresponding border edge.
      <html>
      <head>
      <style>
         .clip-rect {
            position: absolute;
            width: 200px;
            background-color: #3be028;
            padding: 10px;
            clip: rect(0px, 100px, 150px, 0px); 
         }
      </style>
      </head>
      <body>
         <div class="clip-rect">
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
         </div>
      </body>
      </html>
      The following example demostrate how to use the rect() value to crop an image and make it visible at the top-left corner of the screen 
      <html>
      <head>
      <style>
         .clip-rect-img {
            position: absolute;
            width: 150px;
            padding: 10px;
            clip: rect(0px, 200px, 160px, 0px);  
         }
      </style>
      </head>
      <body>
         <img src="images/tree.jpg" class="clip-rect-img"/>
      </body>
      </html>

      CSS Clip - Related Properties

      Property
      Description
      clip-path
      (Recommended) Defines clipping regions using various shapes and paths.